基于jquery實現(xiàn)五星好評
更新時間：2017年11月18日 09:57:40 作者：安靜的對折
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在電商網(wǎng)站，我們經(jīng)常會用到五星評分的功能，現(xiàn)在用jQuery實現(xiàn)一個簡單的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獲取元素前面的兄弟節(jié)點，nextAll獲取元素后面的所有兄弟節(jié)點
//end 方法；返回上一層
//siblings 其它的兄弟節(jié)點
//綁定事件
$("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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Timer是比較常用的工具類，用于按時間計劃執(zhí)行任務(wù)。這篇文章給大家介紹java中的timer的用法詳解，涉及到j(luò)ava timer相關(guān)知識學(xué)習(xí)，對本文感興趣的朋友可以參考下本篇文章2015-10-10
jQuery實現(xiàn)信息提示框(帶有圓角框與動畫)效果
這篇文章主要介紹了jQuery實現(xiàn)信息提示框效果,帶有圓角框與動畫功能,點擊上面按鈕實現(xiàn)對應(yīng)文字的漸變顯示效果,非常具有實用價值,需要的朋友可以參考下2015-08-08
jQuery動態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動態(tài)生成不規(guī)則表格的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-02-02
jQuery 中自帶有雙擊事件，那么當(dāng)需要三擊某對象執(zhí)行某個事件時怎么辦呢？今天就讓我們看看一段 jQuery 三擊事件代碼2013-09-09
jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01![淺談jQuery中的eq()與DOM中element.[]的區(qū)別](http://img.jbzj.com/images/xgimg/bcimg5.png)
淺談jQuery中的eq()與DOM中element.[]的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中的eq()與DOM中element.[]的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了jQuery 檢查某個元素在頁面上是否存在實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了Axios+Jquery實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動
本文給大家分享jQuery EasyUI編輯DataGrid用combobox實現(xiàn)多級聯(lián)動效果的實例代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-08-08
jQuery CSS()方法改變現(xiàn)有的CSS樣式表
使用CSS()方法改變現(xiàn)有的CSS樣式表，css()方法在使用上具有多樣性，比如要改變鏈接顏色，如果需要改變多個樣式屬性，可先定義屬性變量，然后直接賦值給css()方法2014-09-09