总共5颗星，点击哪个就把前面几个星星都高亮。
首先，遍历5颗星，v-for=‘n in 5’ ，然后星星用图片img标签或背景。
然后，这个星星图片是关键，它是由灰色和高亮色两个图组成的一个图标。
最后，点击的时候就判断当前星星是不是小于等于点击的数量编号。如果等于就把这颗星加上light类，这个light类就是让星星显示图标的高亮色部分。
http://www.bslxx.com/m/view.php?aid=2163
<div class="icons mui-inline icons_envirnment">
机舱环境
<i data-index="1" class="mui-icon mui-icon-star"></i>
<i data-index="2" class="mui-icon mui-icon-star"></i>
<i data-index="3" class="mui-icon mui-icon-star"></i>
<i data-index="4" class="mui-icon mui-icon-star"></i>
<i data-index="5" class="mui-icon mui-icon-star"></i>
</div>
`<script src="mui/js/mui.min.js"></script>`
$(".icons_envirnment").on("click","i",function(e){
var index=$(this).index()+1; //
var max=$(".icons_envirnment i:last").index()+1;
for(var i=1;i<=max;i++){
$(".icons_envirnment i:nth-child("+i+")").addClass("mui-icon-star-filled");
}
for(var i=index+1;i<=max;i++){
$(".icons_envirnment i:nth-child("+i+")").removeClass("mui-icon-star-filled");
}
$('#commentEnvironmentValue').val($(this).index());
});
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initia
最低0.47元/天 解锁文章
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
