Question

我在JavaScript文件中有以下代码：

$(document).ready(function() {
    detectscreen();
});

$(window).resize(function(){
        detectscreen();
    });

    function windowWidth() {
        if(!window.innerWidth) {
            // user is being a git, using ie
            return document.documentElement.clientWidth;
        } else {
            return window.innerWidth;
    }}

    function detectscreen() {
        if (windowWidth()>1280) {
            $('body').append('<div id="gearsfloat"></div>');
    }}

基本上，如果宽度小于1280像素，它的作用是将对象附加到文档的末尾，但是这样做的每次都会在页面调整大小时附加它。

我认为我不能使用once函数，因为它只会运行一次，然后在下一次调整大小时，它已经死了。我能做什么？

注意：事实上，我希望在页面调整大小时检查它，但效果是它会一遍又一遍地发生。

if (windowWidth()>1280 && !$('gearsfloat')) {
  $('body').append('<div id="gearsfloat"></div>');
}

以上（由Jason提供）作品不工作但是当它低于1280时它不会删除它。有什么我可以做的吗？ / p>

Answer 1

if (windowWidth()>1280 && !$('gearsfloat')) {
  $('body').append('<div id="gearsfloat"></div>');
}

检查元素是否已经存在？

Answer 2

跟踪元素是否存在，并在条件更改时添加/删除元素。这样你只会添加一次，当它不应该被删除时，它会被删除，你不会做任何不必要的添加或删除：

var gearsExists = false;

function detectscreen() {
   var shouldExist = windowWidth() > 1280;
   if (shouldExist != gearsExists) {
      if (shouldExist) {
         $('body').append('<div id="gearsfloat"></div>');
      } else {
         $('#gearsfloat').remove();
      }
      gearsExists = shouldExist;
   }
}

Answer 3

如果您不希望在调整窗口大小时调用该函数，那么为什么要绑定调整大小函数？

在调整大小函数之前总是不会调用文档就绪函数，所以你可以保证附加你的元素吗？

调整脚本大小会追加对象，一遍又一遍地执行

3 个答案: