1

我正在尝试使用 css 和 jQuery 构建评级系统。

http://jsfiddle.net/naZ9u/2/

    <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() 方法，但我无法完成这项工作，

有任何想法吗

4

2 回答 2

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/

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

于 2016-09-22T14:27:14.940 回答
0

这不是 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/

于 2013-09-13T13:53:31.450 回答