当鼠标扫过时，五角星变为实心，鼠标离开，五角星变为空心

最新推荐文章于 2023-06-05 11:45:00 发布

Dreamer.He

最新推荐文章于 2023-06-05 11:45:00 发布

阅读量384

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_43406976/article/details/120634950

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<body>
  <ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
  </ul>
</body>
  <script>
    // 声明两个变量，分别记录实心和空心
    var sx='★'
    var kx='☆'
    // 需求1
    $('.comment>li').on('mouseenter',function(e){
      $(this).text(sx).prevAll().text(sx)
      $(this).nextAll().text(kx)
      // console.log('this',this)
      // console.log('e:',e)
      // 出错
      // $(this).text(sx).prevAll().text(sx).nextAll().text(kx)
    }).on('mouseleave',function(){
      // 需求2
      $('.comment>li').text(kx)
      // 获取点击的那个li
      $('.comment>li[clickCurrent]').text(sx).prevAll().text(sx)
    }).on('click',function(){
      // 需求3
      // 给当前鼠标点击的那个li添加一个属性，区别其他li
      $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent')
    })
  </script>

优惠劵

Dreamer.He

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
当鼠标扫过时，五角星变为实心，鼠标离开，五角星变为空心

<body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul></body> <script> // 声明两个变量，分别记录实心和空心 var sx
复制链接

扫一扫