gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 15:26:55 25 4
gpt4 key购买 nike

我已经使用 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>

任何帮助都会很棒。

艾米丽

最佳答案

我已经更新了您的 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/

关于javascript - 调整窗口大小时删除 append 的 jQuery Div - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42821942/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com