窗口调整大小时删除附加的 jQuery Div - jQuery答案

【问题标题】：Removing An Appended jQuery Div When Window Resizes - jQuery窗口调整大小时删除附加的 jQuery Div - jQuery
【发布时间】：2017-08-06 21:51:52
【问题描述】：

我已经使用 jQuery 将一些 div 附加到导航上。这些设置是为了在窗口大于 980 像素时附加。

如果窗口小于 980 像素，我希望删除这些附加的 div。我在示例中使用的 jQuery 有效，但前提是加载时窗口是这个大小。当我重新调整窗口大小时，附加的 div 不会被删除或添加，这是我需要的。

我这里有一个codepen：http://codepen.io/emilychews/pen/jBGGBB

代码是：

jQuery

if ($(window).width() >= 980) {

$('.box').append('<div id="newbox">appended with jQuery</div>');

} 

if ($(window).width() <= 979) {

  $('#newbox').remove(); 

}

CSS

.box{
position: relative;
left: 50px;
top: 50px;
height: 30px;
width: 100px;
background: blue;
line-height: 30px;
text-align: center;
color: white;
}

#newbox {
margin-top: 20px;
width: 100px;
height: 100px;
background: red;}

HTML

<div class="box">Test</div>

任何帮助都会很棒。

艾米丽

【问题讨论】：

将您的if ($(window).width() <= 979) { ... } 条件包装在$(window).on('resize',function() { // your if goes here }); 中。或者，您可以使用 CSS 媒体查询隐藏/显示该元素。

标签： javascript jquery css window append

【解决方案1】：

我已经更新了你的 codepen 来展示你如何做到这一点：

这里的代码笔：http://codepen.io/anon/pen/ZeXrar

// Logic inside of function
function addRemoveDiv() {
  // Window Width pointer
  var wW = $(window).width();
  // If window width is greater than or equal to 980 and div not created.
  if (wW >= 980 && !$('#newbox').length) {

    $('.box').append('<div id="newbox">appended with jQuery</div>');

  // else if window is less than 980 and #newbox has been created.
  } else if (wW < 980 && $('#newbox').length) {
    $('#newbox').remove();
  }
}

// Initial function call.
addRemoveDiv();

// On resize, call the function again
$(window).on('resize', function() {
  addRemoveDiv();
})

另外，我建议考虑在调整大小时对函数调用进行去抖动，这样它就不会在窗口调整大小时一遍又一遍地调用。参考这里：

https://davidwalsh.name/javascript-debounce-function

此外，Underscore 和 LoDash 等库在来源时具有可用的去抖动功能：

http://underscorejs.org/

https://lodash.com/

【讨论】：

【解决方案2】：

你应该使用事件监听器。

$(document).ready(function() {
    function checkMyDiv(calledByResize) {
        if($(window).width() >= 980 && $('#newbox').length < 1) { // "$('#newbox').length < 1" will prevent to add lots of div#newbox elements
            $('.box').append('<div id="newbox">appended with jQuery</div>');
        } else if (calledByResize === true && $('#newbox').length > 0) {
            $('#newbox').remove();
        }
    }
    $(window).resize(function() {
        checkMyDiv(true);
    });
    checkMyDiv(false);
});

您可能还想使用 css 规则，例如 display:none|block;，而不是在每次调整窗口大小时删除或附加 div#newbox 元素。

【讨论】：

【解决方案3】：

你快到了，你只需要 resize 事件，并在 ready 事件之后应用它：

(function($) {
    $(function() {
        $(window).on('resize', function() {
            if ($(window).width() >= 980) {
                $('.box').append('<div id="newbox">appended with jQuery</div>');
            } 

            if ($(window).width() <= 979) {
                $('#newbox').remove(); 
            }
        }).trigger('resize');
    });
})(jQuery);

不过，应该注意的是，这实际上会在每个调整大小事件上附加一个新盒子的副本，我假设你不想要。所以，我们会解决这个问题。

我们还可以在这里做一些简单的优化，让代码稍微更有效率，比如将我们的元素选择器和窗口宽度存储在变量中：

(function($) {
    $(function() {
        var $window = $(window),
            newBox = $('<div id="newbox">appended with jQuery</div>'),
            box = $('.box');

        $window.on('resize', function() {
            var windowWidth = $window.width();

            if (windowWidth >= 980) {
                if(!$.contains(document, newBox[0])) {
                    box.append(newBox);
                }
            } else if (windowWidth <= 979) {
                if($.contains(document, newBox[0])) {
                    newBox.remove();
                }
            }
        }).trigger('resize');
    });
})(jQuery);

【讨论】：

【解决方案4】：

我认为你需要在window 对象上添加一个事件监听器，监听.resize() 事件：

https://api.jquery.com/resize/

然后在回调函数中您应该能够检查新大小是否低于您的阈值，因此您可以在这种情况下删除 div。

$(window).resize(function () {
  // Check window width here, and remove div if necessary
})

【讨论】：