调整大小脚本附加对象，一遍又一遍答案

【问题标题】：Resize script appends object, does it over and over again调整大小脚本附加对象，一遍又一遍
【发布时间】：2009-07-06 17:29:05
【问题描述】：

我在 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）~~works~~ 确实 not 工作，但是当它低于 1280 时它不会删除它。有什么我能做的吗？

【问题讨论】：

样式提示 - 你可以这样做：return window.innerWidth || document.documentElement.clientWidth;在你的函数中返回任何一个设置

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

您可以轻松地重写它以摆脱全局变量，或使用闭包： function detectscreen() { var shouldExist = windowWidth() > 1280, gears = $('#gearsFloat'); if (shouldExist) { if(!gears) { $('body').append('
'); } } else { if(gears) { gears.remove(); } } gearsExists = shouldExist; } }

【解决方案2】：

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

先检查元素是否已经存在？

【讨论】：

由于某种原因这不起作用，如果屏幕再次调整到小于1280，则需要删除该元素。

【解决方案3】：

如果你不想在调整窗口大小时调用该函数，那你为什么要绑定resize函数呢？

在调整大小函数之前不会总是调用文档准备函数，所以保证你的元素被附加了？

【讨论】：