466day（五星评分案例）

最新推荐文章于 2021-09-09 20:08:48 发布

orangecloudy

最新推荐文章于 2021-09-09 20:08:48 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/86385610

本文档详细介绍了如何使用HTML、CSS和JavaScript实现一个动态的五角星评分系统。通过鼠标悬停和点击事件，该系统能改变星星的显示状态，从空心变为实心，以直观地展示评分等级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《2019年1月13日》【连续466天】

标题：五星评分案例；
内容：

<head>
  <meta charset="UTF-8">
  <title>五角星评分案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .comment {
      font-size: 40px;
      color: #ff16cf;
    }
    
    .comment li {
      float: left;
    }
    
    ul {
      list-style: none;
    }
  </style>
  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
      var wjx_k = "☆";
      var wjx_s = "★";
      $(".comment>li").on("mouseenter", function () {
        $(this).text(wjx_s).prevAll().text(wjx_s);
        $(this).nextAll().text(wjx_k);
      });
      
      //2. 给ul注册鼠标离开时间，让所有的li都变成空心
      $(".comment").on("mouseleave", function () {
        $(this).children().text(wjx_k);
        
        //再做一件事件，找到current，让current和current前面的变成实心就行。
        $("li.current").text(wjx_s).prevAll().text(wjx_s);
      });
      
      //3. 给li注册点击事件
      $(".comment>li").on("click", function () {
        $(this).addClass("current").siblings().removeClass("current");
      });
      
      
    });
  </script>
  
  
</head>

<body>
<ul class="comment">
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
</body>