Javascript或JQuery需要重新加载页面，为什么？

Question

为什么jQuery的Javascript在应用某些效果之前需要重新加载页面？

CSS是实时更新

示例：

这是实时的

@media all and (max-width:767px) {
.nav-menu {
 margin:0px!important;
 }
 }

这需要重新加载页面以查看效果，不要实时更新调整大小窗口

if ($(window).width() > 980) {
do something
};

为什么？

Answer 1

因为后者是JavaScript。目前，这是一个在解析脚本标记时仅触发一次的例程。您可以将其包装在一个函数中并多次触发它。例如，在窗口调整大小事件上。前者是CSS，浏览器会根据CSS规则不断更新页面。

window.addEventListener("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
}, false);

或者在jQuery中：

$(window).on("resize", function(){
     if ($(window).width() > 980) {
         do something
     };
});

现在每次调整窗口大小时都会触发。

Answer 2

这是因为jQuery / Javascript事情是在加载时完成的，而不是在你调整窗口大小时。理论上，CSS也是在加载时完成的，只知道什么时候显示。

如果你想在调整窗口大小时运行JS / jQuery，你必须添加如下内容：

window.onresize = resize;

function resize()
{
  if ($(window).width() > 980) {
     //do something
  };
}

每次调整窗口大小时都会运行上面的代码，因此如果窗口宽度超过980，则每次运行都会检查。

Read more about .onresize

Answer 3

这将在resize事件被触发时起作用

  $( window ).resize(function() {
     if ($(window).width() > 980) {
       ... 
        .....
        ....
    }
 });

这将有效

  

参考 - jquery

中的 resize() 函数

Answer 4

您必须触发一个事件，以便在不加载页面的情况下对该条件进行javascript检查

window.onresize = function(event) {
    // add your if condition here
};

对于jquery只需使用下面的

$(window).resize(function() {
    // add you if condition here
});

Answer 5

$(window).width()

当你调用这样的函数时，它会在执行时给你一个返回值。如果要在调整大小，文档单击等时给出值，则必须添加事件侦听器。

$(window).on('resize', function() {

    console.log( $(window).width() )

});