jquery - jqueryでのクラススワッピング

Question

classタグのクリックで変更したい。

要件は、div が持つタグをクリックして に置き換え、クラス名を持つ次の li div 内で にactive置き換える必要がある場合です。小さな関数を作成しましたが、正しく動作していません。 secondsecondactive

<div class="wrap">
    <ul>
        <li>
            <div class="first">
                <div class="second"></div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="active"></div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="second"></div>
            </div>
        </li>
    </ul>
    <a href="#" id="next">Next</a>
</div>

$(function(){
    $('#next').click(function (){
        $('ul').find('li').each(function (){
            if($(this).find('div').hasClass('active')){
                $(this).removeClass('active');
                $(this).addClass('second');  
                $(this).next().closest('div').next().attr('class','active');
            }
        })
    })
})

Answer 1

これはあなたのために働くはずです：

$('#next').click(function (){
    $active = $('.active');

    $active.toggleClass('active second');
    $active.closest('li').next().find('.second').toggleClass('second active');
});

ライブデモ

最下部に到達した後、最初の li からやり直したい場合は、これでうまくいくはずです。

var $firstSecond = $('.second').eq(0);

$('#next').click(function (){
    var $active = $('.active');
    var $nextSecond = $active.closest('li').next().find('.second');

    $active.toggleClass('active second');

    if($nextSecond.size() != 0)
        $nextSecond.toggleClass('second active');
    else
        $firstSecond.toggleClass('second active');
});

ライブデモ

Answer 2

私はあなたのマークアップにわずかな変更を加えました：

<div id="wrap">

それはid. これにより、特定の要素を指しているとして、その参照をクロージャーにキャッシュできます。としてではなくシリーズで実際に使用している場合はid、次のように異なります。しかし、これがキャッシングとトラバースでどのように機能するかをお見せしたいと思いました。

$(function(){
    var $ul = $('#wrap ul');

    $('#next').click(function (){
        var $active = $ul.find('.active'),
            $new = $active.parents('li').next();

        $active.toggleClass('active second');

        if ($new.size() < 1) {
            $new = $active.parents('li').siblings().first();
        }

        $new.find('.second').toggleClass('second active');
    });
});

http://jsfiddle.net/userdude/y29uJ/

したがって、これらを一連で実行する場合は...

$(function(){
    $('.next').click(function (){
        var $active = $(this).parent().find('.active'),
            $new = $active.parents('li').next();

        $active.toggleClass('active second');

        if ($new.size() < 1) {
            $new = $active.parents('li').siblings().first();
        }

        $new.find('.second').toggleClass('second active');
    });
});

http://jsfiddle.net/userdude/y29uJ/5

Answer 3

toggleClassjQueryのドキュメント/例で探しているものです