jquery - 调整窗口大小时删除 标签

Question

我有一个有趣的问题，我想删除 <br>在 760px 宽度分辨率下。我一直在使用这个一直有效的方法，但是它在我正在使用的新网站上不起作用。

$(function() {
    if ($(window).width() < 760) {
        $('p.nobreak br').replaceWith(' ');
        $('span.vert-align.centerone br').replaceWith(' ');
    }
});

有趣的是 if 而不是 < 760我改成 > 760 (为了更高分辨率)它确实有效!但我需要这个 < 760 .大家有什么建议吗？

Answer 1

您当前的代码有效，但仅适用于 window 的分辨率加载于。您需要在 resize 中应用您的逻辑事件处理程序，以便它在窗口大小更改时使用react。试试这个:

$(function() {
    var timer
    $(window).resize(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
           if ($(window).width() < 760){
               $('p.nobreak br, span.vert-align.centerone br').replaceWith(' ');
           }
        }, 100);
    });
});

但是请注意，更好的解决方案是使用 CSS 媒体查询来执行此操作。它更快，并且还允许 <br /> 的效果如果窗口变大，将再次应用标签。试试这个:

<p>
    Lorem ipsum
    <br />dolor sit amet
</p>

@media (max-width: 760px) {
    p.nobreak br, 
    span.vert-align.centerone br {
        content: ' '
    }
    p.nobreak br:after, 
    span.vert-align.centerone br:after {
        content: ' '
    }
}

Working example (拖动结果面板大小 handle 以查看实际效果)