mobile Web 星星打分实践

最新推荐文章于 2021-09-01 21:22:17 发布

JasonABCDEF

最新推荐文章于 2021-09-01 21:22:17 发布

阅读量447

点赞数

文章标签：插件星星打分 mobile web

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

版权

<div class="text-center star-box" style="margin:20px 0">
        <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><span class="star-avg"></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><span class="star-avg"></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><span class="star-avg"></span>
        </div>
      </div>

(function starin(){
    var sg = new Array(); 
  $(".star").click(function(){
    var stargroup = $(this).parent();
    var star = $(stargroup).find('.star');
    var starvalue = $(this).index();
    var stargroupvalue = $(stargroup).index();
    sg[stargroupvalue] = starvalue;
    a = sg[0];
    b = sg[1];
    c = sg[2];
    console.log(a,b,c)
    $(star).siblings('.star-result').html(starvalue+" 分");
    for (var i = 0; i < starvalue; i++) {
      $(star[i]).removeClass("icon-star-empty");
      $(star[i]).addClass("icon-star");
    };
    for (var y = starvalue; y < 6; y++) {
      $(star[y]).removeClass("icon-star");
      $(star[y]).addClass("icon-star-empty");
    };
    a=null;
    b=null;
    c=null;
  })
})()

由于mobile端只能click，或者说tap，没有hover，故重新设计了这个插件。