jQuery:添加和删除<br>标签，这取决于窗口宽度以及标签是否已经存在

jQuery: Add and remove a <br> tag depending on window width and whether or not tag already exists

本文关键字：标签 窗口 存在 是否 取决于 添加 删除 lt jQuery gt br      更新时间：2023-10-18

我正在尝试使用jQuery来：

  • 加载页面时检查文档宽度AND
  • 当用户调整页面大小时，请检查文档宽度

检查后：

  • 如果文档宽度大于2400px，并且id为"lineBreak"的标记不存在，我想在"#container-3"之后添加"lineBrea克"标记
  • 如果文档宽度小于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.');
}
});

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

现在在您的html:中

<br class="break" />

这是演示

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

但是，如果您坚持使用jQuery（不建议使用）：

if($(document).width() <=2400)
     $('.break').css('display','block');
else 
     $('.break').css('display','none');
相关文章：