jquery用户评星小例子

用户评星

效果

 

 页面结构

<div  class="evaluation">
    <i class="iconfont">&#xe641;</i>
    <i class="iconfont">&#xe641;</i>
    <i class="iconfont">&#xe641;</i>
    <i class="iconfont">&#xe641;</i>
    <i class="iconfont">&#xe641;</i>
    <p></p>
</div>

这里我引用的是字体图标

css样式

@font-face {font-family: "iconfont";
    src: url('../fonts/iconfont.eot?t=1484033191829'); /* IE9*/
    src: url('../fonts/iconfont.eot?t=1484033191829#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.woff?t=1484033191829') format('woff'), /* chrome, firefox */
    url('../fonts/iconfont.ttf?t=1484033191829') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg?t=1484033191829#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color:#bfbfbf;
}
.icon-star:before { content: "\e641"; }

.yollew{
    color:#f0db18;
}
.evaluation{
    width: 300px;
    margin:200px auto;
}
.evaluation i{
    cursor: pointer;
}

引入的部分

<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

 

js部分

<script type="text/javascript">
      $(".evaluation i").hover(function(){
          var _index = $(this).index()+1;
          $(this).addClass("yollew");
          $(this).prevAll("i").addClass("yollew").end().nextAll("i").removeClass("yollew");
          $(".evaluation p").text(_index+"分");
      })
</script>