この記事は主に jquery に基づいて 5 つ星の賞賛を獲得する方法を詳しく紹介します jquery を学習する上で一定の参考と価値がありますので、jquery に興味のある友人はこの記事を参照してください
電子商取引ウェブサイトでは、私たちはよく使われる 5 つ星評価関数を jQuery を使って実装してみます
<!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>以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。 ！
関連する推奨事項:
JavaScriptは、画像の絶対パスをbase64エンコーディングに変換します
JavaScriptは、マウスホイール制御ページの画像切り替え関数の例を実装します
Javascriptは、タイマーに基づいたプログレスバー関数の例を実装します
以上がjquery に基づいて 5 つ星の評価を獲得の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
