JQuery, CSS - 创建评级系统

Question

我有以下代码。HTML:

<div class="zuta_strana_ocena">
<p>Vaša ocena</p>
<div class="zuta_strana_rating">
<span role="rating" id="star_1"></span>
<span role="rating" id="star_2"></span>
<span role="rating" id="star_3"></span>
<span role="rating" id="star_4"></span>
<span role="rating" id="star_5"></span>
</div>
</div>

CSS:

.zuta_strana_ocena {float: left; width: 65%; margin-top: 10px}
.zuta_strana_ocena p {float: left}
.zuta_strana_rating {height: 30px; width: 180px; display: block; float: left;}
span[role=rating] {display: block; width: 30px; height: 30px; float: left; margin-right: 5px;background: url(../img/resursi/rating.png) 0 0 no-repeat; cursor: pointer}
span[role=rating]:first-of-type {margin-left: 5px}
.star, .on {background: url(../img/resursi/rating.png) 0 -49px no-repeat !important; }

JQuery:

ocena.hover(
function(){
$(this).prevAll().andSelf().addClass('star')},
function(){
$(this).parent().children().removeClass('star');
}
); 

ocena.on('click', function(){
d_o = $(this).index() + 1;
$(this).parent().children().removeClass('on');
$(this).prevAll().andSelf().addClass('on')          
});

目前，如果我想创建所有图片都从同一张图片开始，它工作正常，但那是我不需要的。每个明星都必须有独特的形象，但目前我不知道解决方案。我试过这个 CSS:

#star_1 .star, #star_1 .on {background: url(../img/resursi/rating.png) 0 -49px no-repeat !important; }

但它不工作(什么都没有发生)。我需要做什么才能让它发挥作用？

JSFiddle 链接: http://jsfiddle.net/j5vce/

Answer 1

您可以尝试 Simon Pertersen 的建议。但最好使用如下所示的 Image Sprite；

您可以将此分配给您的 span 的父选择器，并且可以更改图像位置。在这种方法中，星星会加载得很快，因为图像已经预加载了。