五角星评分 | 易学教程

案例分析：

1，鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心

2，鼠标离开 ul ,所有的 li 都变成空心

3，如果点击了某个 li , 鼠标离开 ul 的时候，点击的这个 li 以及这个 li 之间的所有 li 都变成实心

4，因此，当点击了某个 li ，要记录这个li , 给这个 li 一个标记 clsss类标记 "current"等。

jQuery代码：

var wjx-k="☆";
var wjx-s="★";
$(" ul > li").on("mouseenter"  ,  function(){
    $(this).text(wjx-s).prevAll().text(wjx-s);
    $(this).nextAll().text(wjx-k);
})
$("ul").on("mouseleave" , function(){
    $(this).children().text(wjx-k);
    $("ul > li.current").text(wjx-s).prevAll.text(wjx-s);
})
$("ul > li").on("click" , function(){
    $(this).addClass("current").siblings().removeClass("current");
})

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>五角星评分案例</title>
  <style>
    ul {
      font-size: 40px;
      color: #ff16cf;
    }
    
    ul 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 = "★";
      $("ul >li").on("mouseenter", function () {
        $(this).text(wjx_s).prevAll().text(wjx_s);
        $(this).nextAll().text(wjx_k);
      });
      
      //2. 给ul注册鼠标离开时间，让所有的li都变成空心
      $("ul").on("mouseleave", function () {
        $(this).children().text(wjx_k);
        
        //再做一件事件，找到current，让current和current前面的变成实心就行。
        $("li.current").text(wjx_s).prevAll().text(wjx_s);
      });
      
      //3. 给li注册点击事件
      $(" ul >li").on("click", function () {
        $(this).addClass("current").siblings().removeClass("current");
      });
      
      
    });
  </script>
  
  
</head>

<body>
<ul>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
  <li>☆</li>
</ul>
</body>

</html>

来源：https://www.cnblogs.com/shanlu0000/p/11545457.html

标签