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>上，如果您点击其中一个项目，我会根据CSS背景设置我的“评分”<div>看起来你已经点击了这颗星。

我通过给“评级”<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()将其删除。这比试图维护每个拥有它自己独特类的明星要简单得多。

为此，首先删除div中的ol并使用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;    
}

最后你需要做的就是在所选星上设置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

Answer 2

我已经改变了你解决问题的方法。

jsFiddle

<div id="rating-submit">
    <ol class="rating-stars">
        <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-->

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

    // Rating stars
    $( '.rating-stars li' ).on("click", function() {
        var i, len, rating = $( this ).attr( 'rate');

        $( '.rating-stars li').removeClass("rated");
        for(i = 0, len = rating; i < rating; i = i + 1){
            $( '.rating-stars li' ).eq(i).addClass("rated");
        }

    });

});

旧方法的问题在于，当它们与你的div等级重叠时，你不能再触发li上的click事件。

关于图像，你需要一个＆＃34;一个开始＆＃34; ＆＃34;一次性＆＃34;不是所有的五颗星。

Answer 3

在addClass()来电之前

，删除现有的rating-x类：

$( '#rating-submit .rating' ).removeClass('rating-1 rating-2 rating-3 rating-4 rating-5');

重要提示：您的实施中存在一个错误，无法点击黄色的星标。这是因为.rating div位于li s之上，这使得它们无法点击。

Answer 4

你走错了路。

问题是你的黄色开始是li元素，所以我们不能点击低灰色星星，如果我们尝试，我们不知道我们点击了哪些星星。

你不应该这样做，并在每个li元素上添加一个黄色

的类

删除以前添加的类

4 个答案: