jQuery:根据窗口宽度和标签是否已经存在，添加和删除<br>标记

Question

我试图使用jQuery：

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

经检查后：

• 如果文档宽度大于2400 is，并且id "lineBreak“的标记不存在，我想在”#容器-3“之后添加"lineBreak”标记。
• 如果文档宽度小于2400 to，并且"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');