Question

我想要以下内容：

检测加载时的页面宽度，如果它低于/高于959px，则添加/删除类
如果我调整页面大小，我想做同样的事情

$(window).on("resize load", function(e) {
   e = $("body").width();
   if (e <= 959) { 
      $("#button").addClass("active")
   }
   if (e >= 960) {
      $("#button").removeClass("active")
   }
})

此代码有效，但即使我将窗口从500px调整为501px，它也会删除活动类。 如果我超过960px，我希望只添加该类，或者如果我低于959px则删除它。我该怎么做？

修改

感谢您的回答！与此同时，我找到了一个适合我需求的解决方案。

$(window).one("load", function () {
    r = $("body").width();
    if (r >= 960) {
        $("body").attr("mobile","0")
        //do something
    }
    if (r <= 959) {
        $("body").attr("mobile","1")
        //do something
    }
});

$(window).on("resize", function() {
    r = $("body").width();
    if ($("body").attr("mobile") == "0") {
        if (r <= 959) { 
            //do something
            $("body").attr("mobile","1")
        }
    }   
    if ($("body").attr("mobile") == "1") {
        if (r >= 960) { 
            //do something
            $("body").attr("mobile","0")
        }   
    }
})

解释

这是一个非常具体的解决方案，因为我在移动视图中修改了tabindex值，并且我不想在简单的调整大小上将这些值更改回0，只有在我从移动视图切换到桌面。

Answer 1

window的宽度与body的宽度不同。使用$('body').width()将考虑溢出，而使用$(window).width()将为您提供实际的屏幕宽度。

$(window).on('load resize', function() {
  $('#button').toggleClass('active', $(this).width() <= 959)
});

然而，使用media queries要简单得多，事实上，你只是添加了CSS属性。

#button {
  opacity: 0.5;
}

@media (max-width: 959px) {
  #button {
    opacity: 1;
  }
}

Answer 2

你可以讽刺window.matchMedia。如果你看一下perf测试，matchMedia比调整大小要快得多。

var mq = window.matchMedia("(min-width:959px)");

// onload
setButton(mql);

// add listener for the query
mq.addListener(setButton);

function setButton(mq) {
    if (mql.matches) {
        // do something with your setButton
    } else {
        // no match....
    }
}

Answer 3

您可以使用解决方案https://jsfiddle.net/hLkv1xan/1/

$(window).on("resize load", function(e) {
   e = $("body").width();
   if (e <= 959) {
      $("#button").addClass("active")
   } else {
      $("#button").removeClass("active")
   }
});

.active{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">
Submit
</button>

我刚刚修改了你的代码，改变了条件。

希望这会对你有所帮助。

在JQuery中检测调整大小并以X分辨率执行代码

3 个答案: