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');  
    });

只有hilights所有的开始和混乱一切，任何人都可以帮忙吗？工作太多时间，无法让它工作..

谢谢！

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就是小提琴。

$('#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 2

那里有很多插件，比如一个PPrice链接到。我同意其他人认为，除非由于某种原因无法满足您的需求，否则这将是更好的方式。

如果您想让这段代码正常工作，或者您只是为了学习而这样做，那么这可能就是您要做的事情吗？

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

http://jsfiddle.net/pW3Sn/

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

Answer 3

实际上你可以使用纯CSS实现它。

HTML code：

<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/

Answer 4

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

jQuery评级系统

4 个答案: