javascript - 调整窗口大小时删除 append 的 jQuery Div - jQuery

Question

我已经使用 jQuery 将一些 div append 到导航中。如果窗口大于 980 像素，它们将被设置为 append 。

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

我这里有一个代码笔: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>

任何帮助都会很棒。

艾米丽

Answer 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/