评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变
思路：在阿里巴巴矢量图中下载需要用的五角星，这样点击的时候，改变它的color,同时获取到它前面的所有五角星改变它的color,获取它所有后面的五角星让他们的color变成原来的颜色。对了最好不要用空心的五角星，因为改变color的时候只会改变它外面有色的部分。这是我写的时候遇到的坑，已经踩过一次了。比较聪明的小伙伴应该已经有思路了，还没看太懂的，可以看下面详细demo
首先引入css和js
<link rel="stylesheet" href="css/iconfont.css" /> <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script>
下面是html，写在了一个ul之中：
<ul class="stars clearfix"> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li>
</ul>
li用了浮动所以clearfixs是用来清楚浮动的，当然也可以不用li可以把所有的i标签写在一行，感觉还比较方便。。
<i class="iconfont icon-star_full"></i>这段是阿里巴巴矢量图中的其中一种写法，个人比较青睐阿里巴巴矢量图，这种方式的图片就相当于是文字，可以通过css改变它的颜色，同理js也可以改变它的颜色，如果有不知道但是想了解的，可以给我发私信。
那么下面就是css啦：
li{text-decoration: none;list-style-type:none;float: left;} .clearfix{content: " ";display: block;height: 0;line-height: 0;overflow: hidden;clear: both;}
其实下面的js也很简单：（写完之后发现的）
<script type="text/javascript"> $(function(){ $(".icon-star_full").click(function(){//点击五角星的时候 $(this).css("color","#ff0000").parent().prevAll().find(".icon-star_full").css("color","#ff0000");//让点击它的元素先改变颜色，再找到它前面的所有父元素下面的五角星的class名，同时改变它的颜色 $(this).parent().nextAll().find(".icon-star_full").css("color","#000000");//这段就是找到当前元素后面的所有父元素下面的五角星的class名，将他们变为原来的颜色 }) }) </script>
ok！！完美运行,没写的时候觉得很难，写了之后发现没想象中的难。
那么完整的demo写下面吧，就当存档了，下次自己在遇到还能再看看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/iconfont.css" /> <title>评价订单中的小星星，点击之后前面所有的小星星颜色变红，后面的所有星星颜色不变</title> <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script> <style type="text/css"> li{text-decoration: none;list-style-type:none;float: left;} .clearfix{content: " ";display: block;height: 0;line-height: 0;overflow: hidden;clear: both;} </style> </head> <body> <ul class="stars clearfix"> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> <li><i class="iconfont icon-star_full"></i></li> </ul> <script type="text/javascript"> $(function(){ $(".stars li i").click(function(){ console.log($(".stars li i")) $(this).css("color","#ff0000").parent().prevAll().find(".icon-star_full").css("color","#ff0000"); $(this).parent().nextAll().find(".icon-star_full").css("color","#000000"); }) }) </script> </body> </html>