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

Question

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

    //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 如果 window 调整大小然后使用它：

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 调用它，在 window 上用 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

加载文档后，width 变量将设置为您的 window 宽度（假设为 500 像素）。然后它检查当前 window 宽度（即 500px）是否等于 width var (500 !== 500)。这个returnsfalse，所以你的代码不会被执行。您可以这样做：

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>

Answer 3

这达到了预期的效果。坦克的帮助家伙。

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

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

Understanding Jquery function - $(document).ready(callback);

javascript

jquery

jquery-callback