在特定宽度范围内（媒体查询），使用 jQuery 更改类名。

Question

我有以下的html代码，我想进行修改：

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

我想使用媒体查询，但不想修改CSS，而是将类名从width8更改为width6。这通常在标准媒体查询中是不可能的：

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

我希望使用jquery在窗口宽度在1240到1484像素之间时删除类并添加类。你能帮我找到jquery替代媒体查询以修改内联类和ID名称的方法吗？

以下是我的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();

    });

- JCHASE11

Answer 1

你可以尝试这个。

$(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.

- ShankarSangoli

---

这很棒，但它只在调整窗口大小时起作用。我如何使其在窗口大小调整和页面加载时都能起作用？ - JCHASE11

@JCHASE11 - 因为我在页面加载时触发了“resize”事件，所以它也将在页面加载时起作用。我进行了一些修改，请检查我的编辑答案。 - ShankarSangoli

不，它没有被隐藏。控制台仅在调整窗口大小时记录调整大小，而不是在页面加载时记录。 - JCHASE11

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/6896/discussion-between-jchase11-and-shankarsangoli - JCHASE11

看一下这个 fiddle http://jsfiddle.net/dGnV4/ 它会在页面加载时立即记录消息。 - ShankarSangoli

Answer 2

看一下enquire.js

它是一个无依赖的库，允许您使用JavaScript响应媒体查询。

例如：

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", {
    match: function() {
        $info.addClass('col8');
    },

    unmatch: function() {
        $info.removeClass('col8');
    }
}).listen();

那么您可以在站点中为各个断点注册媒体查询，因此在成功匹配时将添加和删除类。

- 67hz

Answer 3

您可以这样做：

var x = $('#myelement'); // this is your element
var w = $(window).width();
if(w >= 700 && w <= 900) {
    x.removeClass('class-to-remove').addClass('class-to-add');
}

- techfoobar