删除附加的 jQuery Div 当 Window 调整大小时 - jQuery

Question

我用 jQuery 将一些 div 附加到导航栏上。这些已设置，因此如果 window 大于 980px，它们将附加。

如果 window 小于 980px，我希望删除这些附加的 div。我在示例中使用的 jQuery 有效，但前提是 window 在加载时是这个大小。当我重新调整 window 大小时，附加的 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

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

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

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

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

Answer 2

您快完成了，您只需要调整大小事件，并在就绪事件之后应用它：

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

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

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

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

Answer 3

我已经更新了你的代码笔来展示你如何完成这个：

代码笔在这里：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();
})

此外，我建议研究在调整大小时消除函数调用的抖动，这样它就不会在 window 调整大小时一遍又一遍地调用。此处参考：

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

此外，像 Underscore 和 LoDash 这样的库在源代码中提供了去抖功能：

http://underscorejs.org/

https://lodash.com/

Answer 4

你应该使用事件侦听器。

$(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; 而不是在每次 window 调整大小时删除或附加 div#newbox 元素。

删除附加的 jQuery Div 当 Window 调整大小时 - jQuery

Removing An Appended jQuery Div When Window Resizes - jQuery

javascript

css

jquery

window

append