理解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条件，并且函数内部不会发生任何事情。

如果您尝试将somtheing记录到控制台或在功能开头提醒消息，您将看到它已被执行：

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，然后用它进行测试：

＆＃13;

＆＃13;

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());

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

编辑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变量将设置为窗口宽度（假设为500px）。然后它检查当前窗口宽度（如此500px）是否等于width var（500 !== 500）。这将返回false，因此您的代码将无法执行。你可以这样做：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;