不能听命于自己者,就要受命于他人。网站首页学海无涯

js(jquery)实现星级评价⭐

陈佚2019-07-15 10:34:2848人围观暂无分类
简介技术服务于业务,还是客户的需求。就是实现星级评价,这里用到了icon图标还有jquery

老规矩还是先把资源分享出来

1.星星icon图标直通车 http://www.iconfont.cn

image.png

2.官网jquery最新压缩版引用地址:<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

image.png


第一步就是引用星星icon图标啦,上面有地址,里面也有各种引入的教程。

image.png

  .light{color: #F1D300;}

我们通过一个class将星星点亮


主要的js

<ul class="star">
<li><i class="iconfont icon-icon-xingxing"></i></li>
<li><i class="iconfont icon-icon-xingxing"></i></li>
<li><i class="iconfont icon-icon-xingxing"></i></li>
<li><i class="iconfont icon-icon-xingxing"></i></li>
<li><i class="iconfont icon-icon-xingxing"></i></li>
<input type="hidden" name="star" value="0">
</ul>
$('.star li').click(function(){
  var index=$(this).index()+1;
  if ($('.light').length==1 && index==1) {$('.light').removeClass('light');$('input[name="credit"]').val(0);return false;};
  $('input[name="credit"]').val(index);
  for (var i = 0; i < 5; i++) {
    if (i<index) {
      $('.star li:eq('+i+')').addClass('light');
    }else{
      $('.star li:eq('+i+')').removeClass('light');
    }
  };
});

大概说一下原理

比如我们点击第三个星星的时候,我们就获取第三个星星的索引

然后我们将小于等于这个索引的星星点亮 也就是添加class="light" 大于这个索引的星星删除class="light"


如果支持0颗星的话就需要加上一个判断

if ($('.light').length==1 && index==1) {$('.light').removeClass('light');$('input[name="credit"]').val(0);return false;};
  $('input[name="credit"]').val(index);

也就是当1颗星的时候 点击第一颗星星 就会变成0星

我们可以通过统计点亮星星的dom数量来统计星级,并通过隐藏域在表单中传值


文章评论

    共有0条评论来说两句吧...