javascript - jQuery:根据窗口宽度和标签是否已存在添加和删除 标签

Question

我正在尝试使用 jQuery 来:

• 在加载页面时检查文档宽度并
• 在用户调整页面大小时检查文档宽度。

检查后:

• 如果文档宽度大于 2400px 且 ID 为“lineBreak”的标签不存在，我想在“#container-3”之后添加“lineBreak”标签。
• 如果文档宽度小于 2400px 并且“lineBreak”标签已经存在，我想将其从 DOM 中移除。

我的代码不工作 - 目前似乎根本没有做任何事情......控制台中没有错误来诊断问题。此外，我怀疑有一种更简单的方法可以达到预期的效果。

非常感谢您帮助解决此问题。

$(document).ready(function() {
var windowWidth = $(window).width();
var lineBreakLength = $('#lineBreak').length;
if (windowWidth >= 2400 && lineBreakLength == 0) {
    $('#container-3').after('<br id="lineBreak">');
    console.log('Window width greater than 2400px. Added <br> tag.');
} else if (windowWidth < 2400 && lineBreakLength > 0) {
    $('#lineBreak').remove();
    console.log('Window width less than 2400px. Removed <br> tag.');
}
});

$(window).resize(function() {
var windowWidth = $(window).width();
var lineBreakLength = $('#lineBreak').length;
if (windowWidth >= 2400 && lineBreakLength == 0) {
    $('#container-3').after('<br id="lineBreak">');
    console.log('Window width greater than 2400px. Added <br> tag.');
} else if (windowWidth < 2400 && lineBreakLength > 0) {
    $('#lineBreak').remove();
    console.log('Window width less than 2400px. Removed <br> tag.');
}
});

Answer 1

@media only screen and (min-width: 2400px)  {
   .break {display:none;}
}

现在在您的 html 中:

<br class="break" />

这是 DEMO

请注意，在演示中为了便于测试，我已将 2400 更改为 600

但是如果你坚持用 jQuery 来做(不推荐):

if($(document).width() <=2400)
     $('.break').css('display','block');
else 
     $('.break').css('display','none');