JQUERY 简单实现评价星星打分功能

神夜大侠

于 2024-04-20 00:42:24 发布

阅读量173

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/u012015434/article/details/137981885

版权

评价星级：<span id="star1"></span><span id="sfen"></span>

<script>
 $(function(){
       let starhtml = ""
       let star1 = "star.png" //星星图灰色
       let star2 = "staron.png" //星星图点亮
       for(let i = 0; i< 5; i++){
         starhtml+= `<img src="${star1}">`
       }
       $("#star1").html(starhtml)
       $("#star1 img").click(function(){
          let index = $(this).index();
          for(let i = 0; i < 5; i++){
             if(i<index+1){
                 $("#star1 img").eq(i).attr("src",star2);
             }else{
                 $("#star1 img").eq(i).attr("src",star1);
             }
          }
          $("#sfen").html((index+1)+'分')
       })
    })
</script>