Javascript jQuery：添加和删除a<；br>；标签取决于窗口宽度以及标签是否已存在

我正在尝试使用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.');
}
});

$（文档）.ready（函数（）{
var windowWidth=$（window.width（）；
var lineBreakLength=$（'#lineBreak'）。长度；
如果（windowWidth>=2400&&lineBreakLength==0）{
$（“#container-3”）。之后（“
”）；
console.log（'窗口宽度大于2400px。添加了
标记'）；
}否则如果（窗口宽度<2400&&lineBreakLength>0）{
$（'#lineBreak'）。删除（）；
console.log（'窗口宽度小于2400px。已移除标签'）；
}
});
$（窗口）。调整大小（函数（）{
var windowWidth=$（window.width（）；
var lineBreakLength=$（'#lineBreak'）。长度；
如果（windowWidth>=2400&&lineBreakLength==0）{
$（“#container-3”）。之后（“
”）；
console.log（'窗口宽度大于2400px。添加了
标记'）；
}否则如果（窗口宽度<2400&&lineBreakLength>0）{
$（'#lineBreak'）。删除（）；
console.log（'窗口宽度小于2400px。已移除标签'）；
}
});

现在在您的html中：

<br class="break" />

这是你的电话号码

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

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

---

if（$（document）.width（）为什么你不能简单地使用媒体查询来显示/隐藏2400px的断点？正如@Scott所说的。另外，它甚至不需要
br
元素-从浮动块或内联块切换（或者任何让你的div首先显示在一起的东西）对于非浮点/块可能已经足够了。帮你自己一个忙，如果你在两个地方有相同的代码，就把它变成一个函数。很好的观点…谢谢。哇-当你知道怎么做的时候太容易了！非常感谢Ashkan。关于这一点，只要一点-刚刚实现了代码，我认为“最小宽度”应该是“最大宽度”对于原始问题；因此：
@仅媒体屏幕和（最大宽度：2400px）{.break{display:none；}}
，因为这将在文档宽度小于2400px时隐藏
标记，并在其宽度大于2400px时显示。
<br class="break" />

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