javascript - 删除之前添加的类

Question

我正在开发一个用户可以按星级评分的评分系统。

我的评分如下:

<div id="rating-submit">
    <ol class="rating-stars">
        <div class="rating"></div>
        <li rate="1"></li>
        <li rate="2"></li>
        <li rate="3"></li>
        <li rate="4"></li>
        <li rate="5"></li>
    </ol><!--End rating-stars-->
</div><!--End rating-submit-->

我放置了<li>超过我“评级”的元素(星级)<div> ，如果您单击其中一项，我会为我的“评分”设置样式 <div>带有 CSS 背景，所以看起来您点击了这颗星。

我通过给出“评级”来设计它 <div>一个名为 rating-(1, 2, 3, 4, 5) 的额外类。

jQuery:

jQuery( document ).ready( function( $ ) {

    $( '#rating-submit .rating-stars li' ).click( function() {
        var rating = $( this ).attr( 'rate' );
        $( '#rating-submit .rating' ).addClass( 'rating-' + rating );

    });

});

我的问题:

如果我添加例如“rate-3”作为类，然后单击第二颗星，“rate-3”类将保留在那里并否决其他类。

我的问题:

如果我点击一个新星，我如何删除之前添加的类？

这是我的 Jsfiddle

Answer 1

让每颗星星成为它自己的元素，并使用它自己的通用类来开/关。使用 prevAll().addClass() 将类添加到所有以前的星星，并使用 removeClass() 将其删除。这比试图维护每颗星都拥有自己独特的类要简单得多。

为此，首先通过删除 ol 中的 div 并使用 data 属性使您的 HTML 有效::

<div id="rating-submit">
    <ol class="rating-stars">
        <li data-rate="1"></li>
        <li data-rate="2"></li>
        <li data-rate="3"></li>
        <li data-rate="4"></li>
        <li data-rate="5"></li>
    </ol>
</div>

然后，您可以根据每个星星的 li 上的单个类使您的 CSS 通用:

#rating-submit .rating-stars {
    position: static;
    width: 112px;
    height: 20px;
    margin: 0;
    padding: 0;
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) no-repeat;    
}

#rating-submit .rating-stars li {
    height: 20px;
    width: 19px;
    display: inline-block;
    margin: 0;
    list-style: none;
}

#rating-submit .rating-stars li.active {
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) 0 -38px no-repeat;    
}

最后，您的 JS 需要做的就是在所选星上设置 active 类，并使用 prevAll() 设置它左侧的类:

$('#rating-submit .rating-stars li').click(function () {
    var $chosenStar = $(this);
    $chosenStar
        .siblings('li').removeClass('active').end() // remove existing classes
        .prevAll().add(this).addClass('active');
    console.log($chosenStar.data('rate')); // the chosen rating value
});

Working fiddle