1

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

要求是当我们单击标签时，无论哪个 div 都active应该替换为second，然后在下一个 li div 中，其类名second应该替换为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');
            }
        })
    })
})
4

3 回答 3

2

这应该适合你：

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

现场演示

于 2012-06-28T01:30:53.443 回答
1

我对你的标记做了一点改动：

<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

于 2012-06-28T01:54:52.313 回答
0

toggleClass是您在 jQuery文档/示例中寻找的内容

于 2012-06-28T01:19:43.340 回答