评价订单中的五角星，点击之后前面所有的五角星颜色变红，后面的所有星星颜色不变

思路：在阿里巴巴矢量图中下载需要用的五角星，这样点击的时候，改变它的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>