五星評價

時間 2019-11-26

標籤五星評價简体版

原文原文鏈接

自引jqueryhtml

 1 <style>
 2     * { margin: 0; padding: 0; }
 3     ul { list-style: none; margin: 100px; }
 4     .comment {
 5         color: red;
 6     }
 7 
 8     .comment li {
 9         float: left;
10         font-size: 40px;
11         margin-left:5px;
12     }
13 </style>
14 <body>
15     <ul class="comment">
16         <li id="s">☆ </li>
17         <li>☆</li>
18         <li>☆</li>
19         <li>☆</li>
20         <li>☆</li>
21     </ul>
22 </body>
23 </html>
24 <script src="jquery-1.11.1.min.js"></script>
25 <script>
26     /*
27      一、鼠標移入   ：當前星星和前面的爲實心的
28                      當前星星後面的是空心
29      二、鼠標移出  ：
30           未點擊： 所有空心
31           有點擊： 當前點擊的星星和前面的是實心的
32      三、鼠標點擊：
33              當前點擊的星星和前面的是實心的
34      * */
35     var empSatr = "☆";   
36     var selStar = "★";
37     $(".comment").on('mouseenter','li',function(){
38         $(this).html(selStar).prevAll().html(selStar).end().nextAll().html(empSatr);
39     })
40     $(".comment").on('mouseleave',"li",function(){
41         $("li").html(empSatr);
42         $(".select").html(selStar).prevAll().html(selStar);
43     });
44     $(".comment").on('click',"li",function(){
45         $(this).addClass('select').siblings().removeClass("select");
46     })
47 </script>

相關標籤/搜索

每日一句

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