jquery - 如何在此元素之后和之前更改所有元素的类？

Question

再会。

我有代码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。

请告诉我这是怎么做的？

Answer 1

您可以使用.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
});

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

Answer 3

您可以使用.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/

Answer 4

$(".level").click(function()
{
    $(this).prevAll().removeClass("empty-class").addClass("good-class");
    $(this).nextAll().removeClass("good-class").addClass("empty-class");
});

Answer 5

你可以试试这个：

$(".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");
        }
    });
});