這篇文章主要為大家詳細介紹了基於jquery實現五星級好評，具有一定的參考和學習jquery的價值，對jquery感興趣的小伙伴們可以參考一下本篇文章
在電商網站，我們常常會用到五星評分的功能，現在用jQuery實現一個簡單的demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!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 = "★";
$("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實現五星級好評的詳細內容。更多資訊請關注PHP中文網其他相關文章！
