ホームページ >ウェブフロントエンド >jsチュートリアル >5つ星の評価を達成するためのjqueryメソッド
この記事では、jquery に基づいて 5 つ星の賞賛を達成する方法を詳しく紹介します。興味のある方はぜひ参考にしてください。
電子商取引 Web サイトでは、よく 5 つ星の評価関数を使用します
<!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>
関連する推奨事項:
js と jquery を使用してページの無限ロードを実現する方法
以上が5つ星の評価を達成するためのjqueryメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。