h5星星评分

h5代码

<li>
	<p>Campus/Facilities</p>
	<ul class="star_ul">
		<li><img class="nor" src="./Resources/commentStar_nor.png"><img class="sel" src="./Resources/commentStar_sel.png"></li>
		<li><img class="nor" src="./Resources/commentStar_nor.png"><img class="sel" src="./Resources/commentStar_sel.png"></li>
		<li><img class="nor" src="./Resources/commentStar_nor.png"><img class="sel" src="./Resources/commentStar_sel.png"></li>
		<li><img class="nor" src="./Resources/commentStar_nor.png"><img class="sel" src="./Resources/commentStar_sel.png"></li>
		<li><img class="nor" src="./Resources/commentStar_nor.png"><img class="sel" src="./Resources/commentStar_sel.png"></li>										
	</ul>
	<input type="hidden" name="facilities" value="0">
</li>

css代码

.star_ul{display: flex;}
.star_ul li{width: 14px!important;margin-left: 4px;height: 14px;}
.star_ul li img{width: 14px;display: block;height: 14px;}
.star_ul li .sel{display: none;}
.star_ul li.active .nor,.star_ul li.hs .nor{display: none;}
.star_ul li.active .sel,.star_ul li.hs .sel{display: block;}

js代码

$(".star_ul li").hover(function(){
    $(this).addClass('hs');
         $(this).prevAll().addClass('hs');
 },function(){
         $(this).removeClass('hs');
         $(this).prevAll().removeClass('hs');
 })

$(".star_ul li").click(function () {
    $(this).addClass('active');
    $(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');
	var num = $(this).index()+1;
	$(this).parent().parent().find('input').val(num);
	console.log($(this).index());
})