css
.tip-word{margin-left:20px;color:red;}
.stars{margin: 8px;height:20px;}
.stars span{ float: left; line-height: 15px; }
.stars i{width: 15px; height: 15px; line-height: 15px; float: left; margin-right: 5px;background-position:center; background-image:url(images/star_gray.png);background-size: 100%; color: #fff; text-align: center; cursor:Pointer; font-style: normal;}
.stars .on{background-image:url(images/star.png);background-position:center;background-size: 100%;}
html
<div class="stars">
<span>評價:</span>
<for start="0" end="5" comparison="lt" step="1" name="i" >
<i class="on"></i>
</for>
<span class="tip-word">非常好</span>
<input id="point" type="hidden" name="point" value="5"/>
</div>
JS
<script>
$(function(){
/*
* 鼠標點擊拔稳,該元素包括該元素之前的元素獲得樣式,并給隱藏域input賦值
* 鼠標移入,樣式隨鼠標移動
* 鼠標移出隘蝎,樣式移除但被鼠標點擊的該元素和之前的元素樣式不變
* 每次觸發(fā)事件屏鳍,移除所有樣式床佳,并重新獲得樣式
* */
var tip_word = ["非常差","差","一般","好","非常好"];
var stars = $('.stars');
var Len = stars.length;
//遍歷每個評分的容器
for(i=0;i<Len;i++){
//每次觸發(fā)事件飞袋,清除該項父容器下所有子元素的樣式所有樣式
function clearAll(obj){
obj.parent().children('i').removeClass('on');
}
stars.eq(i).find('i').click(function(){
var num = $(this).index();
clearAll($(this));
//當前包括前面的元素都加上樣式
$(this).addClass('on').prevAll('i').addClass('on');
//給隱藏域input賦值
$(this).siblings('input').val(num);
//文字提示
$(this).siblings('.tip-word').html(tip_word[num-1]);
});
stars.eq(i).find('i').mouseover(function(){
var num = $(this).index();
clearAll($(this));
//當前包括前面的元素都加上樣式
$(this).addClass('on').prevAll('i').addClass('on');
//文字提示
$(this).siblings('.tip-word').html(tip_word[num-1]);
});
stars.eq(i).find('i').mouseout(function(){
clearAll($(this));
//觸發(fā)點擊事件后input有值
var score = $(this).siblings('input').val();
//默認最少一個
if (score == 0)score = 1;
//文字提示
$(this).siblings('.tip-word').html(tip_word[score-1]);
//當前包括前面的元素都加上樣式
for(i=0;i<score;i++){
$(this).parent().find('i').eq(i).addClass('on');
}
});
}
})
</script>
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者