使用指定宽度范围（媒体查询）的jquery更改类名称 [英] Changing a class name with jquery given a specific width range (media query)

问题描述

我有下面的html，我想修改：

I have the following html that I am trying to modify:

<div class="col1 width8"><img src="images/entity.jpg"></div>

我想使用媒体查询，但我不想修改css，类名从width8到width6。这通常不可能与下面的标准媒体查询：

I want to use media queries, but I do not want to modify the css, but rather replace the class name from width8 to width6. This is not typically possible with the standard media query below:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

我希望使用jquery删除类并添加类当窗口在1240和1484px之间。你可以帮助我修改内联类和id名称的媒体查询jquery吗？

I wish to use jquery to remove the class and add a class when the window is between 1240 and 1484px wide. Can you assist me with the jquery alternative to media queries for modifying inline class and id names?

这里是我的jquery

Here is my jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

推荐答案

$ b

You can try this.

$(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   if(width >= 700 && width <= 900){
       $('#myelement').removeClass('width8').addClass('width6');
   }
   else{
       $('#myelement').removeClass('width6').addClass('width8');
   }
})
.resize();//trigger the resize event on page load.

这篇关于使用指定宽度范围（媒体查询）的jquery更改类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！