html+js 实现小红书或者淘宝打星效果

版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/89433144

我的qq  2038373094 

---

主要知识点

1、js获取点击的li元素是第几个

2、循环遍历li的，替换img的src

---

html代码

星星图片自己下载

<!-- 打星 -->
<div class="rgt">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">评论和打星</h3>
    </div>
    <div class="panel-body">
        <table class="table">
      <tr>
         <td>服务态度</td>
         <td>
         <ul id="service">
         <li> <img src="icon/ustart.png" onclick="changestart()"/></li>
         <li> <img src="icon/ustart.png" onclick="changestart()"/></li>
         <li> <img src="icon/ustart.png" onclick="changestart()"/></li>
         <li> <img src="icon/ustart.png" onclick="changestart()"/></li>
         <li> <img src="icon/ustart.png" onclick="changestart()"/></li>
         </ul>
        </td>
      </tr>
      <tr>
         <td>回复速度</td>
         <td>
          <ul id="speed">
         <li> <img src="icon/ustart.png" onclick="times()"/></li>
         <li> <img src="icon/ustart.png" onclick="times()"/></li>
         <li> <img src="icon/ustart.png" onclick="times()"/></li>
         <li> <img src="icon/ustart.png" onclick="times()"/></li>
         <li> <img src="icon/ustart.png" onclick="times()"/></li>
         </ul>
         </td>
      </tr>
	 <tr>      
         <td>专业技能</td>
            <td>
          <ul id="ability">
         <li> <img src="icon/ustart.png" onclick="ability()"/></li>
         <li> <img src="icon/ustart.png" onclick="ability()"/></li>
         <li> <img src="icon/ustart.png" onclick="ability()"/></li>
         <li> <img src="icon/ustart.png" onclick="ability()"/></li>
         <li> <img src="icon/ustart.png" onclick="ability()"/></li>
         </ul>
         </td>
      </tr>
	 <tr>
         <td>此次咨询评价</td>
         <td><input type="text" class="form-control" id="name" placeholder="待评价..."></td>
      </tr>
</table>
    </div>
</div>
</div>

js代码

<script type="text/javascript">
function changestart(){
//改变星星-服务态度
  $("#service li").click(function(){
    var j=$(this).index();
    //全部变成星星
    var ims=$("#service li img");//获取所有的li元素
   for (var i = 0; i<5; i++) {
   if(i<=j){
   $(ims[i]).attr("src","icon/start.png");
   }else{
   $(ims[i]).attr("src","icon/ustart.png");
   }
	
                               }
  });
 
  
}
function times(){
 //改变星星-回复速度
   $("#speed li").click(function(){
    var j=$(this).index();
    //全部变成星星
    var ims=$("#speed li img");//获取所有的li元素
   for (var i = 0; i<5; i++) {
   if(i<=j){
   $(ims[i]).attr("src","icon/start.png");
   }else{
   $(ims[i]).attr("src","icon/ustart.png");
   }
	
                               }
  });
}
function ability(){
//专业技能
   $("#ability li").click(function(){
    var j=$(this).index();
    //全部变成星星
    var ims=$("#ability li img");//获取所有的li元素
   for (var i = 0; i<5; i++) {
   if(i<=j){
   $(ims[i]).attr("src","icon/start.png");
   }else{
   $(ims[i]).attr("src","icon/ustart.png");
   }
	
                               }
  });
}
</script>

---

css样式

#service,#service li{
	float: left;
	list-style: none;
}
#ability,#ability li{
	float: left;
	list-style: none;	
}
#speed,#speed li{
	float: left;
	list-style: none;	
}