<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/pingjia.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
</head>
<body>
<!--总体评价-->
<div class="mui-content">
<ul class="mui-table-view">
<li class="star-li one">
<a>总体评价</a>
<div class="icons">
<i data-index="1" class="icon-xingxing mui-icon-star"></i>
<i data-index="2" class="icon-xingxing mui-icon-star"></i>
<i data-index="3" class="icon-xingxing mui-icon-star"></i>
<i data-index="4" class="icon-xingxing mui-icon-star"></i>
<i data-index="5" class="icon-xingxing mui-icon-star"></i>
<em>5星</em>
</div>
</li>
<li class="star-li li_two">
<a>口味</a>
<div class="icons">
<i data-index="1" class="icon-xingxing mui-icon-star"></i>
<i data-index="2" class="icon-xingxing mui-icon-star"></i>
<i data-index="3" class="icon-xingxing mui-icon-star"></i>
<i data-index="4" class="icon-xingxing mui-icon-star"></i>
<i data-index="5" class="icon-xingxing mui-icon-star"></i>
<em>5星</em>
</div>
<span class="icon-xingxingshi z"></span>
</li>
<li class="star-li">
<a>服务</a>
<div class="icons">
<i data-index="1" class="icon-xingxing mui-icon-star"></i>
<i data-index="2" class="icon-xingxing mui-icon-star"></i>
<i data-index="3" class="icon-xingxing mui-icon-star"></i>
<i data-index="4" class="icon-xingxing mui-icon-star"></i>
<i data-index="5" class="icon-xingxing mui-icon-star"></i>
<em>5星</em>
</div>
</li>
<li class="star-li">
<a>环境</a>
<div class="icons">
<i data-index="1" class="icon-xingxing mui-icon-star"></i>
<i data-index="2" class="icon-xingxing mui-icon-star"></i>
<i data-index="3" class="icon-xingxing mui-icon-star"></i>
<i data-index="4" class="icon-xingxing mui-icon-star"></i>
<i data-index="5" class="icon-xingxing mui-icon-star"></i>
<em>5星</em>
</div>
</li>
</ul>
<div id="info"></div>
</div>
<!--口味评价结束-->
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui('.icons').on('click','i',function(){
var index = parseInt(this.getAttribute("data-index"));//获取当前元素的索引值
var parent = this.parentNode;//获取当前元素的父节点
var children = parent.children;//获取父节点下所有子元素
if(this.classList.contains("icon-xingxing")){//判断当前节点列表中是否含有.mui-icon-star元素
for(var i=0;i<index;i++){//亮星
children[i].classList.remove('icon-xingxing');
children[i].classList.add('icon-xingxingshi');
}
}else{//重置已经亮星的元素
for (var i = index; i < 5; i++) {
children[i].classList.add('icon-xingxing')
children[i].classList.remove('icon-xingxingshi')
}
}
})
</script>
</body>
</html>这个是果汁哥写的代码，很不错，但是发现我想改变当前行星星的分数，每行点击都有一个分数，
如何改变点击哪一个div下面的星星 然后分数就改变当前em里面的数值，
点击下面就改变下一个数值，这个实现，我试过好多方法，都卡在这了。
3 个回复
flax (作者) - 一个作家曾经说过:“一个失落的灵魂能很快杀死你，远比细菌快的多.”
@DCloud_MUI_new 谢谢哈。问题能看一下吗
m***@outlook.com - 开发app所以用到此框架，很强大，但是有很多地方不明白
js
$(function () {
//评分
var starRating = 0;
$('.photo span').on('mouseenter',function () {
var index = $(this).index()+1;
$(this).prevAll().find('.high').css('z-index',1)
$(this).find('.high').css('z-index',1)
$(this).nextAll().find('.high').css('z-index',0)
$('.starNum').html((index2).toFixed(1)+'分')
})
$('.photo').on('mouseleave',function () {
$(this).find('.high').css('z-index',0)
var count = starRating / 2
if(count == 5) {
$('.photo span').find('.high').css('z-index',1);
} else {
$('.photo span').eq(count).prevAll().find('.high').css('z-index',1);
}
$('.starNum').html(starRating.toFixed(1)+'分')
})
$('.photo span').on('click',function () {
var index = $(this).index()+1;
$(this).prevAll().find('.high').css('z-index',1)
$(this).find('.high').css('z-index',1)
starRating = index2;
$('.starNum').html(starRating.toFixed(1)+'分');
alert('评分：'+(starRating.toFixed(1)+'分'))
})
//取消评分
$('.cancleStar').on('click',function () {
starRating = 0;
$('.photo span').find('.high').css('z-index',0);
$('.starNum').html(starRating.toFixed(1)+'分');
})
//确定评分
$('.sureStar').on('click',function () {
if(starRating===0) {
alert('最低一颗星！');
} else {
alert('评分：'+(starRating.toFixed(1)+'分'))
}
})
})
html
<div id="starRating">
<p class="photo">
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
<span><i class="high"></i><i class="nohigh"></i></span>
</p>
<p class="starNum">0.0分</p>
<div class="bottoms">
<a class="garyBtn cancleStar">取消评分</a><a class="blueBtn sureStar">确认</a>
</div>
</div>
..................................
css
............................
starRating .photo span {
}
starRating .photo span:last-child {
}
starRating .photo span .nohigh {
}
starRating .photo span .high {
}
starRating .starNum {
}
starRating .bottoms {
}
starRating .photo {
}
starRating .bottoms a {
}
starRating .bottoms .garyBtn {
}
starRating .bottoms a {
}
.garyBtn {
margin-right: 60px!important;
background-color: #e1e1e1;
color: #999999;
}
.blueBtn {
background-color: #1968b1;
color: #fff;
}
.blueBtn:hover {
background: #0e73d0;
}
L***@163.com
大神！！怎么取星级的值？