我有一个简单的评级星星脚本,如下所示。我的问题是,一旦用户投了票,他就不能改变他的投票(如果他改变主意并想在提交之前改变他的投票)。我的脚本如下:
$(function() {
$('a').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('hoverstar');
$(this).nextAll().removeClass('visited');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('hoverstar');
$(this).nextAll('a').removeClass('hoverstar');
$(this).nextAll('a').removeClass('visited');
}
);
$('a').click(
function() {
$(this).prevAll('a').andSelf().addClass('visited');
$(this).nextAll('a').removeClass('visited');
}
);
});
样式表如下:
.rate_widget ul
{
background: url('star-white16.gif') repeat-x;
}
.rate_widget a.visited{
background: url('star-red16.gif') repeat-x;
}
.rate_widget a.hoverstar{
background: url('star-gold16.gif') repeat-x;
}
星星显示为如下链接:
<div class='rate_widget'>
<ul>
<li><a href='#' class='one-star' id="1">1</a></li>
<li><a href='#' class='two-stars' id="2">2</a></li>
<li><a href='#' class='three-stars' id="3">3</a></li>
<li><a href='#' class='four-stars' id="4">4</a></li>
<li><a href='#' class='five-stars' id="5">5</a></li>
</ul>
</div>