jQuery 五角星评分案例(详细代码)

简介: jQuery 五角星评分案例(详细代码)
+关注继续查看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .comment {
      font-size: 40px;
      color: rgb(247, 10, 6);
    }
    .comment li {
      float: left;
      cursor: pointer;
    }
    ul {
      list-style: none;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      var wjx_none = '☆'; // 空心五角星
      var wjx_sel = '★'; // 实心五角星

      // 鼠标放上去当前的li和之前所有的li内容全部变为实心五角星,移开变为空心
      $('.comment li').on('mouseenter', function () {
        // 先让当前的变为实心
        // $(this).text(wjx_sel).prevAll('li').text(wjx_sel);
        // $(this).nextAll('li').text(wjx_none);

        // 两行代码傻傻分不清的时候需要用 end() 结束之后在使用,也就相当于重新一行再次使用 this
        $(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
      })
      $('.comment li').on('mouseleave', function () {
        if ($('li.current').length === 0) {
          $('.comment li').text(wjx_none);
        }else{
          $('li.current').text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none);
        }
      })
      $('.comment li').on('click', function () {
        $(this).attr('class', 'current').siblings('li').removeAttr('class');
      })
    })
  </script>
</head>
<body>
  <ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
  </ul>
</body>
</html>
  • demo 效果:

image


相关文章
|
26天前
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
13 0
|
3月前
|
JavaScript 前端开发 开发者
|
3月前
|
JavaScript 开发者
|
4月前
|
JSON JavaScript 数据格式
jQuery综合代码--(方便复习)
jQuery综合代码--(方便复习)
18 0
|
4月前
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
|
5月前
|
前端开发 JavaScript
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
Echarts实战案例代码(22):jquery使用ajax属性beforeSend实现预加载loading效果代替showLoading的解决方案
50 0
|
7月前
|
JavaScript 前端开发
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
|
10月前
|
JavaScript 算法 前端开发
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js、jquery操作
117 0
连连看html游戏全代码js、jquery操作
|
10月前
|
移动开发 JavaScript 前端开发
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码js、jquery操作
124 0
飞机大战html游戏全代码js、jquery操作
热门文章
最新文章
相关产品
云迁移中心
相关课程
更多
推荐文章
更多