php - jQuery 评级系统

Question

我正在尝试从 0 开始评分系统，到目前为止我有两个类(class)，总共有 5 颗星，

它会显示项目的评分，直到人将鼠标悬停在它们上方，然后它会突出显示之前的星星并隐藏当前评分，

<div id="stars">
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="off"></div>
<div class="off"></div>
</div>

到目前为止我得到的 JS

$('#stars').mouseover(function() {
        $(this).children().prevAll().andSelf().attr('class', 'on');  
    $(this).nextAll().attr('class', 'on');  
    });

这只会突出显示所有的开始并弄乱一切，任何人都可以帮忙吗？工作时间太多，就是无法正常工作..

谢谢!

Answer 1

如果您将其用作点击前的预览，那么您可能希望像这样使用悬停功能:

$('#stars .star').hover(
    function() {
        $(this).prevAll().andSelf().addClass('on');
        $(this).nextAll().removeClass('on');
    },
    function() {
        $(this).parent().children().removeClass('on');
    }
);

与此 jsFiddle 中的 HTML 一起使用，您可以在其中看到它的工作:http://jsfiddle.net/jfriend00/aRTzQ/

我还建议使用 addClass() 和 removeClass() 而不是直接操作属性，因为它可以让您更灵活地在对象上拥有其他类，并且它更具可读性。

要使点击具有粘性以便它记住该设置，您可以使用类似这样的东西:http://jsfiddle.net/jfriend00/QxADg/ .相应的 CSS/HTML 在 fiddle 中。

$('#stars .star').hover(
    function() {
        $(this).prevAll().andSelf().addClass('preview');
        $(this).nextAll().removeClass('preview');
    },
    function() {
        $(this).parent().children().removeClass('preview');
    }
);

$('#stars .star').click(function() {
    $(this).parent().children().removeClass('on');
    $(this).prevAll().andSelf().addClass('on');
});

$('#stars').hover(
    function() {$(this).addClass("inPreview");},
    function() {$(this).removeClass("inPreview");}
);