jq+js 实现星星打分功能！-CSDN博客

本文链接：https://blog.csdn.net/dfQ_Qjb/article/details/49743807

自己做了一个星星打分插件。想着用最短的代码去实现它。

<style>

.icon-star-empty{
  color:#ddd;
  cursor:pointer;
}
.icon-star{
  color:orange;
  cursor:pointer;
}
.star-group{
  cursor:default;
}

</style>

<div class="star-group"><span>创新</span>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <span class="star-result"></span>
</div>
<div class="star-group"><span>实用</span>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <span class="star-result"></span>
</div>
<div class="star-group"><span>设计</span>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <i class="icon-star-empty star"></i>
     <span class="star-result"></span>
</div>

</pre><pre name="code" class="html"><script>
$(document).ready(function(){
  star(2,3,4,"abc.txt");
});
function star(a,b,c,url){
    var starresult = new Array(a,b,c);
    var stargroup = document.getElementsByClassName('star-group');
    for (var i = 0; i < stargroup.length; i++) {
      var star = $(stargroup[i]).find('.star');
      $(star).siblings('.star-result').html(starresult[i]+"星");
      for (var y = 0; y < starresult[i] ; y++) {
          $(star[y]).removeClass("icon-star-empty");
          $(star[y]).addClass("icon-star");
        };
    };//初始化stargroup的星星
    for (var sgi = 0; sgi < stargroup.length; sgi++) {
      // sgi用途是循环每个stargroup的hover事件
      $(stargroup[sgi]).hover(function(){
        var star = $(this).find('.star');
         sgiindex = $(this).index();
         // sgiindex的用途是找到每个stargroup的序号，对于不影响其他stargroup的值非常重要
        for (var i = 0; i < 6; i++) {
          $(star[i]).hover(function(){
            var starindex = $(this).index();
            // starindex的用途是找到hover到的星星的序号
            $(star).removeClass('icon-star');
            $(star).addClass('icon-star-empty');
            // 上面两句使星星的状态初始化，全部空星星
            for (var y = 0; y < starindex ; y++) {
              $(star[y]).removeClass("icon-star-empty");
              $(star[y]).addClass("icon-star");
            };
            // 此循环让序号小于hover序号的星星都变成实心星星
          });
          $(star[i]).click(function(){
            starresult[sgiindex] = $(this).index();
            // 将点击到的星星的序号值给starresult，之所以是数组，是让三行stargroup的值不互相影响
            $(this).siblings('.star-result').html(starresult[sgiindex]+"星");
            // 改后面span的输出文字
            var starresult1 = starresult[sgiindex];
            $.post(url,{sgiindex,starresult1})
          })
        };
      },function(){
        // hover离开时执行
        var star = $(this).find('.star');
        $(star).removeClass('icon-star');
        $(star).addClass('icon-star-empty');
        // 初始化星星状态
        for (var y = 0; y < starresult[sgiindex] ; y++) {
          $(star[y]).removeClass("icon-star-empty");
          $(star[y]).addClass("icon-star");
          // 把之前click储存的值都一一取出来实现，sgiindex的值是为了实现此hover到的stargroup，不影响其他行
        };
      });
    }
}