Question

我已经使用jQuery将一些div附加到导航栏上。如果窗口大于980px，它们会被设置为附加。

如果窗口小于980px，我希望删除这些附加的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>

任何帮助都会很棒。

艾米丽

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/

Answer 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元素。

Answer 3

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

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

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

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

Answer 4

你几乎就在那里，你只需要调整大小事件，并在准备好的事件之后应用它：

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

虽然，应该注意的是，这实际上会在每个单独的resize事件上追加你的新盒的附加副本，我认为你不需要。所以，我们将解决这个问题。

我们也可以在这里进行一些简单的优化，使代码更有效，例如将元素选择器和窗口宽度存储在变量中：

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

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

4 个答案: