1

サイトに数行の新しいコードを挿入しようとしています。ブラウザーの幅が 768px 未満の場合はコードを挿入する必要があり、コードが既に存在する場合は再度挿入する必要はありません。何らかの理由で、ブラウザーのサイズを 768 未満に変更すると、サイズを変更するたびにコードが 2 回挿入され、さらに 1 回挿入されます。このコード行が複数回挿入されている理由を知っている人はいますか?

$(window).resize(function() {
  if ($(window).width() < 768) {
    if ($(document).not('#step-4-circle')) {
      $('<div id="step-4-circle" class="step-circle"><div class="inner"><span class="number">4</span><span class="title">FULFILL ORDERS</span><span class="subtitle">where you want</span></div></div>').insertBefore('#how-step-3');
    }
  }

});
4

2 に答える 2

2

条件を調整して、要素が選択されているかどうかを確認します。

if ( $('#step-4-circle').length == 0 ) {
    $('<div id="step-4-circle" class="step-circle"><div class="inner"><span class="number">4</span><span class="title">FULFILL ORDERS</span><span class="subtitle">where you want</span></div></div>').insertBefore('#how-step-3');
}

JS フィドル: http://jsfiddle.net/3zP8H/1/

于 2013-12-22T09:33:37.697 に答える
1

.not()メソッドはコレクションから一致する要素を削除し、$(document)1 つの要素 (ドキュメント オブジェクト) のみを持つコレクションを返します step-4-circle。セットに存在しない ID を持つ要素を除外しようとしています。また、オブジェクトは真の値であるため、条件は常に真であるためlength、@Kevin が言及しているようにプロパティを使用する必要があります。

また、resizeイベントは何度も.setTimeout()発生することに注意してください。このイベントをリッスンする場合は、関数を使用することをお勧めします。

var t = null; 
var $w = $(window).resize(function() {
     clearTimeout(t); 
     t = setTimeout(function(){
         if ( $w.width() < 768 ) {
              if ($('#step-4-circle').length == 0)
              $('<div id="step-4-circle">...</div>').insertBefore('#how-step-3');
         } else {
              $('#step-4-circle').remove();
         }
     }, 80);
});
于 2013-12-22T09:50:24.923 に答える