Question

我正在尝试使用css＆amp; amp建立评级系统jQuery的。

    <ul id="ratecv">
                <li id="star1" class="star starred"></li>
                <li id="star2" class="star"></li>
                <li id="star3" class="star"></li>
                <li id="star4" class="star"></li>
                <li id="star5" class="star"></li>
        </ul>

如果列有星级明星的列表项，则上面的所有列表项都应该应用“已加星标”的类，如果用户离开而没有点击任何列表项。应删除之前应用的所有“已加星标”的类。

如果用户点击特定星标，则“已加星标”的所有类都应保留。

这是一个简单的评级系统，我正在尝试使用jquery

我正在尝试使用mouseenter，mouseleave，parents（）方法，但我无法使其工作，

任何想法

Answer 1

我认为这会对你有帮助

 $(document).ready(function(){

  $(".star").hover(function(){
     $(this).addClass('starred');
     $(this).prevAll('.star').addClass('starred');
    }, function(){
        $(this).removeClass('starred');
        $(this).prevAll('.star').removeClass('starred');
    });

    $('.star').click(function(e) {
        $(this).addClass('starred-chosen');
        $(this).prevAll('.star').addClass("starred-chosen");
    });
});

小提琴http://jsfiddle.net/naZ9u/68/

当您点击任何一颗星星以使其被选中时，您必须使用不同的类。

Answer 2

这不是raty可以做的，但根据你的代码，你可以得到这个：

CSS：

.star:hover, .star.starred, .star.current {
    background-position: -200px 0;
}

JS：

$('#ratecv li.current').prevAll(".star").addClass("current");

$('#ratecv li').mouseenter(function () {
    $(this).addClass('starred');
    $(this).prevAll(".star").addClass("starred");
})

$('#ratecv li').mouseleave(function () {
    $('#ratecv .starred').each(function () {
        $(this).removeClass("starred");
    });
});

$('#ratecv li').click(function () {
    $('#ratecv li.current').removeClass("current");
    $(this).addClass("current")
    $(this).prevAll(".star").addClass("current");
});

小提琴：http://jsfiddle.net/naZ9u/3/

使用CSS / jQuery的简单评级系统

2 个答案: