了解 Jquery 函数 - $(document).ready(callback);

Question

您好，我正在尝试在调整窗口大小和准备好文档时运行功能。由于调整大小是由移动滚动触发的，因此有必要检查高度没有改变。此代码适用于调整大小但不适用于加载。有没有人能够解释为什么该功能没有在文档准备好时执行？提前致谢。

    //CLOSE EXPANDED ELEMENTS FOR MOBILE

var $window = $(window);
var width = $(window).width();


var callback = function () {



        if($(window).width() != width){

            if ($window.width() < 756) {
            $(".content_lower.collapse").removeClass('in');
          }
            else {
              $(".content_lower.collapse").addClass('in');
            }

        }

};

$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());

Answer 1

实际上在文档准备就绪时，文档刚刚加载，$(window).width() 等于 width 变量。

所以函数callback会在width = $(window).width()被调用，所以它不会进入if条件并且函数内部不会发生任何事情。

如果您尝试将某些内容记录到控制台或在函数开始时发出警告消息，您将看到它已执行：

var callback = function() {
  console.log("Callback entered !!!");

  if ($(window).width() != width) {
    if ($window.width() < 756) {
      $(".content_lower.collapse").removeClass('in');
    } else {
      $(".content_lower.collapse").addClass('in');
    }
  }
};

编辑：

如果您仍想在文档加载中执行它，您可以添加一个初始化为 false 的布尔标志，如果窗口一旦调整大小，则将其设置为 true，然后使用它进行测试：

var $window = $(window);
var width = $(window).width();
var called = false;

var callback = function() {
  console.log("callback entered !!!");
  if ($(window).width() != width || !called) {

    if ($window.width() < 756) {
      $(".content_lower.collapse").removeClass('in');
    } else {
      $(".content_lower.collapse").addClass('in');
    }

  }
  called = true;
};

$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());

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

<div class="content_lower.collapse">the div</div>

编辑 2：

更好的方法是使用布尔标志作为callback 函数的参数，并在加载文档时使用false 调用它，在调整窗口大小时使用true：

    var $window = $(window);
    var width = $(window).width();

    var callback = function(resized) {

      if ($(window).width() != width || !resized) {
        if ($window.width() < 756) {
          $(".content_lower.collapse").removeClass('in');
        } else {
          $(".content_lower.collapse").addClass('in');
        }
      }
    };

    $(document).ready(callback(false));
    $(window).resize(callback(true));

Answer 2

这产生了预期的效果。坦克的帮助家伙。

var $window = $(window);
var width = $(window).width();


var callback = function () {
  if ($window.width() < 756) {
  $(".content_lower.collapse").removeClass('in');
  }
  else {
    $(".content_lower.collapse").addClass('in');
  }
};

$(document).ready(callback);
$( window ).resize(function() {
  if($(window).width() != width){
    callback();
  }
});

Answer 3

当文档被加载时，width 变量将被设置为您的窗口宽度（比如说 500 像素）。然后它检查当前窗口宽度（所以 500px）是否等于width var（500 !== 500）。这将返回false，因此您的代码将不会被执行。你可以这样做：

var callback = function() {
  if ($(window).width() < 756) {
    $('body').text($(window).width() + " - if");
  } else {
    $('body').text($(window).width() + " - else");
  }
};

$(document).ready(callback);
$(window).resize(callback);

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