1

私はほとんどそこにいますが、私のjQueryは適切なタイミングでクラスを追加していません。余分な2回のクリックがあります。

このフィドルをチェックしてください: http://jsfiddle.net/X7L8q/4/

jQuery:

  var currentItem = $('.item').filter('.active');

  $('#next-button').on('click', function () {
      var nextItem = currentItem.next();
      currentItem.removeClass('active');

      //Here is the meat of the code, its adding the class a few clicks later than I want.
      if (nextItem.length) {
          currentItem = nextItem.addClass('active');
      } else if (nextItem.length == 0) {
          $('.item:last').addClass('red');
          alert('class red added');
      }

  });

HTML:

jQuery は、#next-buttonがクリックされたときに最後の項目にクラスを追加.activeする必要がありますが、 == 0 の.next()場合、クラス red を追加すると、クリックが 2 回遅れて問題が発生します。nextItem

フィドルをチェックして、私が何を意味するかを確認してください。

  <div class="item active" data-category="sharks">content1</div>
  <div class="item" data-category="tigers">content2</div>
  <div class="item" data-category="lions">content3</div> 
  <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

うわー、これらの答えはすべて良いです！みんなありがとう！

4

4 に答える 4

1

この問題は、.next追加のセレクターを指定せずにメソッドを使用すると発生します。あなたの場合、next-button最後のアイテムの後にハイパーリンクが選択されています。

.nextメソッドは次のように使用できます。

var nextItem = currentItem.next('.item');

そのため、最後の要素リンクの後は選択されません。

また、次のコード行を移動することをお勧めします。

currentItem.removeClass('active');

最後のアイテムのクラスをif削除しないようにブロック内に配置します。active

試してみてください: jsFiddle

于 2013-08-08T07:41:13.697 に答える