jquery - jquery 中的类交换

Question

我想在点击标签时更改class。

要求是，当我们单击具有 active 的标签时，应将其替换为 second，然后在类名为 second 的下一个 li div 中替换> 应替换为 active。我做了一个小功能，但它不能正常工作。

<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');
});

Live DEMO

如果您想在到达底部后从第一里重新开始，这应该适合您:

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');
});

Live DEMO