16

同じクラスのdivが3つあります。クリックすると、クラス'selected'をNEXTDIVに追加し、前のクラスから削除します。正常に機能していますが、ループしたいです。

現在、1-> 2-> 3からループします、3-> 1、助けてください...

HTML

<div id="all">
<div class="section selected">ONE</div>
<div class="section">TWO</div>
<div class="section">THREE</div>
</div>
<br />
<a href="javascript:;" id="button">CLICK</a>

CSS

.selected{background:red}

JS

$('#button').click(function(){
    $('.section.selected').removeClass('selected').next('.section').addClass('selected'); 
});

JSフィドルリンク： http： //jsfiddle.net/madhuri2987/KK66g/2/

4

4 に答える 4

27

最も簡単な方法は、存在するかどうかを確認.next()し、存在しない場合は最初に「選択」することです。

var $next = $('.section.selected').removeClass('selected').next('.section');
if ($next.length) {
    $next.addClass('selected'); 
}
else {
    $(".section:first").addClass('selected');
}

http://jsfiddle.net/KK66g/3/

于 2013-03-26T02:50:38.393 に答える
2

これがすべての場合に機能すると主張すべきかどうかはわかりませんが、最初から最後まで有効ではないことに進むことができるかどうか常に疑問に思っていました。これは私が解決したことです：

$('#button').click(function(){
    $('.selected + .section, .section:eq(0)')
        .last().addClass('selected')
        .siblings('.selected').removeClass('selected');
});

http://jsfiddle.net/userdude/9UFD2/

.sectionこれが行うことは、最初に次の後にあるものを選択することです.selected：

.selected + .section

また、セカンダリセレクターを追加して、少なくとも1つの一致を確認して取得します。

, .section:eq(0)

上記は$('.section')[0]、この比較的単純な例の最初のものを表しています。次に.last()、複合選択の結果を使用して、結果[1]（有効な.next()一致となるもの）または[0]最初の一致（リストに結果が1つしかない場合は、最初と最後の.last()両方を表示します）を取得します。

セレクターの順序は一見逆になっています.last()が、これはの代わりに機能.first()しているようです。そのため、その理由は必ずしもわかりません。これはセレクターの順序であるため、選択で意味のある方法でセレクターを順序付けました。

次に、残りは簡単です。セレクターが返したクラスを追加し、（新しく）選択されたクラスを.last()見つけて（他の1つだけが、選択しているクラスになります）、そのクラスを削除します。.siblings().section.selected.selected

うまくいくようです。これが信頼できるかどうかについてのコメントを聞きたいと思います。

于 2013-03-26T04:19:36.063 に答える
0

私はこのような簡単なコードを実行しました

var i=0;
$('#button').click(function(){
    i++;
    if(i == $('.section').length) {$('.section.selected').removeClass('selected');$($('.section')[0]).addClass('selected');i=0;}
    else{$('.section.selected').removeClass('selected').next('.section').addClass('selected');}
});
于 2013-03-26T04:34:52.947 に答える
0

CoffeeScript

私がそれを使用している人々のために共有すると思った私の単純なCoffeeScriptソリューション：

$currently_selected = $('.section.selected')

# Loop back to first sibling if on the last one. 
if $currently_selected.next().length is 0 
  $next_selected = $currently_selected.siblings().first()

else 
  $next_selected = $currently_selected.next()

$currently_selected.removeClass('selected')
$next_selected.addClass('selected')

注：ループ/サイクルに含めたくない兄弟がいる場合は、適切なselectorものnext()を渡すようにしてください。siblings()

于 2015-07-08T03:35:34.163 に答える