1

再会。

我有代码html:

<span class="empty-star level" style="cursor:pointer" id="1"></span>
<span class="empty-star level" style="cursor:pointer" id="2"></span>
<span class="empty-star level" style="cursor:pointer" id="3"></span>
<span class="empty-star level" style="cursor:pointer" id="4"></span>
<span class="empty-star level" style="cursor:pointer" id="5"></span>

我希望当我单击具有类level所有元素的元素时,使用empty-classto更改类,good-class然后将所有元素更改为good-classto empty-class

请告诉我这是怎么做的?

4

5 回答 5

4

您可以使用.prevAll()andnextAll()为此目的:

$('.level').on('click', function() {
    $(this)
      .prevAll('.empty-class')
        .toggleClass('empty-class good-class') // remove empty, add good
        .end()
      .nextAll('.good-class')
        .toggleClass('good-class empty-class'); // remove good, add empty
});
于 2013-06-12T07:51:42.563 回答
2
$('.level').on('click', function() {
    $(this).prevAll('.empty-class').removeClass('empty-class').
        addClass('good-class');
    $(this).nextAll('.good-class').removeClass('good-class').
        addClass('empty-class');
});
于 2013-06-12T07:50:57.987 回答
0

您可以使用.prev().next()jQuery 函数!

http://api.jquery.com/prev/

http://api.jquery.com/next/

你可以使用.addClass().removeClass()

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

//编辑:

如果您想将类分配给多个 prev 或 next 元素,您可以使用.prevAll()/.nextAll().prevUntil()/.nextUntil()

http://api.jquery.com/prevAll/

http://api.jquery.com/nextAll/

http://api.jquery.com/prevUntil/

http://api.jquery.com/nextUntil/

于 2013-06-12T07:48:20.613 回答
0
$(".level").click(function()
{
    $(this).prevAll().removeClass("empty-class").addClass("good-class");
    $(this).nextAll().removeClass("good-class").addClass("empty-class");
});
于 2013-06-12T08:08:05.517 回答
0

你可以试试这个:

$(".level").click(function() {
    var thisId = $(this).attr("id");
    $.each($(".level"), function(index) {
        if(this.id < thisId) {
            $(this).removeClass("empty-class");
            $(this).addClass("good-class");
        }
        else if(this.id > thisId) {
            $(this).removeClass("good-class");
            $(this).addClass("empty-class");
        }
    });
});
于 2013-06-12T07:52:26.100 回答