如何更改此元素前后所有元素的类？

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>

我希望当我单击element时，将class empty-class更改为good-class，然后所有元素将class good-class更改为empty-class。

请告诉我这个是怎么做的？

Answer 1

您可以使用.prevAll()和nextAll()来实现此目的：

$('.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/

//编辑：

如果要将类分配给多个前一个或下一个元素，可以使用.prevAll() / .nextAll()或.prevUntil() / .nextUntil()

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

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

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

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