五星简单操作

<input type="text" name="score" id="score" value="" />
<div id="star" class="clearfix">
<div class="star">
<span> 请打分 <em class="red">*</em></span>
<ul class="xingUL">
　　<li class=""><a href="javascript:;">1</a></li>
　　<li class=""><a href="javascript:;">2</a></li>
　　<li class=""><a href="javascript:;">3</a></li>
　　<li class=""><a href="javascript:;">4</a></li>
　　<li class=""><a href="javascript:;">5</a></li>
</ul>
<i class="tishi"></i>
</div>
</div>

<script type="text/javascript">
$(function(){
mark('star');
});

function mark(classobj){
var aLi=[],oUl=[],oSpan=[],oP=[],sel=[],aMsg = [
"很不满意",
"不太满意",
"一般",
"比较满意",
"非常满意"
];
$('.'+classobj).each(function(e){
aLi[e] = $(this).find('li');
sel[e] = $(this).find('li[class=on]').length;
oUl[e] = $(this).find('ul');
oSpan[e] = $(this).find('i');
//oP[e] = $(this).find('p');
aLi[e].unbind('mouseover').mouseover(function(){
aLi[e].attr('class','')
for (var i = 0; i <= $(this).index(); i++) {
aLi[e].eq(i).attr('class',"on");
}
//oP[e].show().html(aMsg[$(this).index()]);
});
aLi[e].unbind('mouseout').mouseout(function(){

aLi[e].attr('class','')
for (var i = 0; i < sel[e]; i++) {
aLi[e].eq(i).attr('class',"on");
}
//oP[e].hide().html('');
});
aLi[e].unbind('click').click(function(){
aLi[e].attr('class','')
for (var i = 0; i <= $(this).index(); i++) {
aLi[e].eq(i).attr('class',"on");
}
//oP[e].hide();
sel[e] = $(this).index()+1;
oSpan[e].html(aMsg[$(this).index()]);
document.getElementById('score').value = sel[e];
//console.log(sel[e]);
});
});
}
</script>

转载于:https://www.cnblogs.com/hejianrong/p/5703797.html