基于jquery实现五星好评

2019-11-19 14:54:52

字体：大中小

来源：转载

供稿：网友

在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>五角星评分案例</title>   <style>     * {       padding: 0;       margin: 0;     }     .comment {       font-size: 40px;       color: teal;     }     .comment li {       float: left;     }     ul {       list-style: none;     }   </style> </head> <body> <ul class="comment">   <li>☆</li>   <li>☆</li>   <li>☆</li>   <li>☆</li>   <li>☆</li> </ul>  <script src="jquery-1.12.2.js"></script> <script>   $(function () {     var wjx_k = "☆";     var wjx_s = "★";     //prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点     //end 方法；返回上一层     //siblings 其它的兄弟节点     //绑定事件     $("li").on("mouseenter", function () {       $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k);     }).on("click", function () {       $(this).addClass("active").siblings().removeClass("active")     });     $("ul").on("mouseleave", function () {       $("li").html(wjx_k);       $(".active").text(wjx_s).prevAll().text(wjx_s);     })   }); </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：浅谈Emergence.js 检测元素可见性的 js 插件

下一篇：基于JavaScript实现五子棋游戏