jQuery 评级系统

Question

我正在尝试从 0 开始制作一个评级系统，到目前为止我有两个课程，总共有 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

为什么不直接使用别人的插件呢？例如 http://www.fyneworks.com/jquery/star- rating/

Answer 2

如果您在点击之前使用它作为预览，那么您可能需要像这样使用悬停功能：

$('#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 就在小提琴中。

$('#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");}
);

Answer 3

那里有很多插件，例如 PPrice 链接到的插件。我同意其他人的观点，这将是更好的方法，除非他们由于某种原因不能满足您的需求。

如果您想让这段代码工作或者您只是为了学习而这样做，也许这就是您想要做的？

您可以将鼠标悬停在“星星”（框）上以查看颜色变化。

http://jsfiddle.net/pW3Sn/

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

Answer 4

其实你可以用纯CSS来实现。

HTML 代码：

<div id="stars">
    <div class="star">
        <div class="star">
            <div class="star">
                <div class="star">
                    <div class="star"></div>
                </div>
            </div>
        </div>
    </div>
</div>

和 CSS：

#stars {
    height: 16px; /* height of stars block */
}
#stars .star {
    height: 16px; /* height of one star */
    padding-left: 16px; /* width of one star */
    background-image: url('http://url.to.your.star.image');
    float: left;
}
#stars .star:hover, 
#stars .star :hover {
    background-position: 0px -16px; /* toggle image */
}

一个工作示例： http://jsfiddle.net/4CfzD/