Question

我想点击标签时更改class。

要求是当我们点击标记时，active应该用second取代哪个div，然后在里面，具有类名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

如果您希望在到达底部后从第一个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');
});

Live DEMO

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

toggleClass正是您在jQuery documentation/examples

中寻找的

在jquery中进行类交换

3 个答案: