ウィンドウのサイズが変更されたときに<br />のタグを削除します。

Question

面白い問題がありますが、760ピクセル幅の解像度で<br>を削除したいと思います。私はこれを常に使ってきましたが、私が取り組んでいる新しいウェブサイトではうまくいきません。

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

面白い部分は、私は（高解像度用）> 760によって変化し、それが動作しない場合は、代わりの< 760です！しかし、私は< 760のためにこれが必要です。アドバイスの人？

Answer 1

あなたの現在のコードは動作しますが、唯一の解決のためにwindowがでロードされています。 resizeイベントハンドラでロジックを適用して、ウィンドウサイズが変更されたときに反応するようにする必要があります。試してみてください：

$(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私はCSSに行ってきました

Answer 2

なぜメディアクエリを使用してjavascriptではなくこれらの要素を非表示にするのですか？例えば、このような

何か：

@media screen and (max-width:760px) { 
    p.nobreak br, span.vert-align.centerone br { display: none; } 
}