基于jquery實(shí)現(xiàn)五星好評
更新時間：2017年11月18日 09:57:40 作者：安靜的對折
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在電商網(wǎng)站，我們經(jīng)常會用到五星評分的功能，現(xiàn)在用jQuery實(shí)現(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é)點(diǎn)，nextAll獲取元素后面的所有兄弟節(jié)點(diǎn)
//end 方法；返回上一層
//siblings 其它的兄弟節(jié)點(diǎn)
//綁定事件
$("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)文章
jQuery使用fadein方法實(shí)現(xiàn)漸出效果實(shí)例
這篇文章主要介紹了jQuery使用fadein方法實(shí)現(xiàn)漸出效果的方法,以一個簡單實(shí)例形式分析了jQuery中fadein方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
實(shí)例講解jQuery EasyUI tree中state屬性慎用
本文通過實(shí)例代碼給大家介紹jQuery EasyUI tree中state屬性慎用，切忌把state設(shè)置為closed，否則該節(jié)點(diǎn)會加載整個tree，形成死循環(huán)2016-04-04
jQuery checkbox選中問題之prop與attr注意點(diǎn)分析
這篇文章主要介紹了jQuery checkbox選中問題之prop與attr注意點(diǎn),結(jié)合form表單實(shí)例形式分析了針對火狐瀏覽器下checkbox失效情況的處理技巧,需要的朋友可以參考下2016-11-11
jQuery基于函數(shù)重載實(shí)現(xiàn)自定義Alert函數(shù)樣式的方法
這篇文章主要介紹了jQuery基于函數(shù)重載實(shí)現(xiàn)自定義Alert函數(shù)樣式的方法,涉及jQuery函數(shù)重載及頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-07-07
jQuery 淡出一個圖像到另一個圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個圖片的淡出切換效果，需要的朋友可以參考下2013-06-06
此文主要用Jquery實(shí)現(xiàn)滾動新聞,Jquery的強(qiáng)大功能，幾行代碼即可實(shí)現(xiàn)，需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)掃雷游戲第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
用jquery實(shí)現(xiàn)的對checkbox和radio控件的美化，非常不錯，大家可以通過修改圖片來實(shí)現(xiàn)更漂亮的效果。2010-11-11
今天小編就為大家分享一篇關(guān)于jQuery事件blur()方法的使用實(shí)例講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03