jquery - 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; }

查询：

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

http://jsfiddle.net/j5vce/7/

试试这个，我只是给了他们每个瓷砖的类，并为它们添加了背景

*edited (你甚至可以只指向他们的 ID) *edited 1.

该链接现在显示 1 个当前状态，然后显示 3 个唯一状态

Answer 2

你可以试试 Simon Pertersen 的建议。但最好使用如下图所示的图像精灵；

您可以将其分配给您span的父选择器，并且可以更改图像位置。在这种方法中，由于图像已经预加载，星星将快速加载。