jQuery----五星好評實現

時間 2019-11-13

標籤 jquery 五星好評實現欄目 JQuery 简体版

原文原文鏈接

在美團、淘寶、京東等網頁上，有許多商品、服務評價頁面，五星好評功能很常見，本文利用jQuery實現五星好評功能。javascript

案例圖片：css

案例需求：html

如左圖所示，鼠標進入某個五角星，該五角星包括以前的五角星所有變成黃色。java

鼠標離開後，變成黃色的恢復原狀jquery

當鼠標在某個五角星上點擊的時候，該五角星和其以前的五角星所有變成黃色，鼠標離開後，顏色也不會恢復過來。this

實現思路：spa

①獲取全部的li（五角星所有存在於li標籤中），給$(this)註冊mouseover、mouseout、click事件code

②mouseover事件中，將當前和前面的五角星變成黃色htm

$(this).text("★").prevAll("li").text("★")；blog

③click事件中，給當前點擊的li五角星賦予index屬性，方便在鼠標滑出的時候，可以保存點擊時候五角星及以前五角星的狀態，同時清除其餘全部的li的index屬性

$(this).attr("index",1).siblings("li").removeAttr();

④mouseout事件中，全部的li變爲空白，可是屬性index有值的li及其前面的li變爲黃色

$(this).text("☆").siblings().text("☆")；

　 $( " li [indx=1] ").text("★").prevAll().text("★")；

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             ul {
 8                 list-style: none;
 9             }
10 
11             li {
12                 float: left;
13                 font-size: 39px;
14                 color: yellow;
15             }
16         </style>
17 
18         <script src="jquery-1.12.2.js"></script>
19         <script type="text/javascript">
20             $(function(){
21                 //獲取全部的li,註冊鼠標移入事件
22                 $("li").mouseover(function(){
23                     $(this).text("★").prevAll().text("★");
24                 }).mouseout(function(){
25                     $(this).text("☆").siblings().text("☆");
26                     $("li[index=1]").text("★").prevAll().text("★");
27                 }).click(function(){
28                     $(this).attr("index",1).siblings().removeAttr();
29                 });
30             });
31         </script>
32     </head>
33     <body>
34         <ul>
35             <li>☆</li>
36             <li>☆</li>
37             <li>☆</li>
38             <li>☆</li>
39             <li>☆</li>
40         </ul>
41     </body>
42 </html>

相關標籤/搜索

每日一句

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