jQuery---五角星評分案例

時間 2020-02-06

原文原文鏈接

五角星評分案例

1. 鼠標通過li的時候，當前的位置是實心五角星，前面的是實心。當前位置後面的是空心。注意此處不能徹底用鏈式編程寫到底html

2. 鼠標離開，comment的全部孩子變爲空心五角星。額外，找到current, 讓current和它的前面都是實心。jquery

3. 點擊li的時候，當前的位置增長個current的class, 其他位置移除current 編程

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

<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 () {
        //2. 給ul註冊鼠標離開時間，讓全部的li都變成空心
        $(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>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。