jQuery-五角星評分案例
五角星評分案例
需求
1. 滑鼠移入到li上,做啥 ==> 當前的li以及前面所有的li變成實心
當前li後面所有的li變成空心
2. 滑鼠移出ul,做啥 ==> 把所有的li變成空心
3. 滑鼠點選li,做啥 ==>
把當前點選的li做了標記,當滑鼠移出的時候,找到剛才點選的li,恢復成實心的效果
做標記的思路:
1. 使用下標把當前點選的li的下標儲存起來
2. 給當前點選的li新增個特殊的類名(做標記)
效果:點選了li,當滑鼠移出ul的時候,把我點選的li和前面所有的li變成實心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
let $li=$("li");
const wjx_s = "★";
const wjx_k = "☆";
$li.on("mouseenter",function () {
// 讓當前的li元素的內容變成實心五角星
// $(this).text(wjx_s)
// 同時讓這個li元素前面的所有的五角星變成實心
// $(this).prevAll().text(wjx_s)
// $(this).nextAll().text(wjx_k)
// prevObject屬性
$(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
})
$li.on('click',function(){
$(this).addClass('ben').siblings().removeClass('ben')
})
$li.on('mouseout',function(){
$li.text(wjx_k);
$('.ben').text(wjx_s).prevAll().text(wjx_s)
})
// siblings() 所有的兄弟(不包含自己)
// prev() 前面一個兄弟
// next() 後面一個兄弟
// prevAll() // 前面所有的兄弟
// nextAll() 後面所有一個兄弟
</script>
相關文章
- php+mysql+html實現五角星評論功能PHPMySqlHTML
- 微信小程式動態評分展示/五角星展示/半顆星展示/自定義長度展示微信小程式
- 【新特性速遞】評分,評分,評分
- JQuery-入門jQuery
- jQuery-錨點動畫jQuery動畫
- 評分卡模型的評分標準模型
- APP評分APP
- jQuery-簡介與基本使用jQuery
- 分頁案例
- 資料分析實際案例之:pandas在餐廳評分資料中的使用
- 網站前端_jQuery-基礎入門網站前端jQuery
- 從零玩轉jQuery-初識jQueryjQuery
- 從零玩轉jQuery-文件處理jQuery
- 評估指標與評分(上):二分類指標指標
- CSS3五角星效果詳解CSSS3
- React 小案例 使用者評論React
- React 小案例 訂單列表評價React
- Epcior成功案例分10
- 衝刺結果評分
- 【python爬蟲案例】利用python爬取豆瓣讀書評分TOP250排行資料Python爬蟲
- sklearn建模及評估(分類)
- 軟體測評報告做為招標評分項
- 從3分漲到8.5分,誰在改寫《原神》評分?
- MongoDB在vivo評論中臺的應用案例MongoDB
- jQuery星級評分效果詳解jQuery
- 遊戲評分低,怎麼辦?遊戲
- 聊一聊評分模型校準模型
- 原生Javascript實現星星評分元件JavaScript元件
- 從零玩轉jQuery-核心函式和靜態方法jQuery函式
- 鴻蒙開發案例:分貝儀鴻蒙
- Apple App Store API 快速獲取app綜合評分,最新評論APPAPI
- TapTap還有官方評分?已經給18款遊戲評價APT遊戲
- 評分卡模型開發--總體流程模型
- 《寶可夢 劍/盾》媒體評分彙總 均分81分
- Flask前後端分離專案案例Flask後端
- PHP 原生操作 Mysql 分頁資料案例PHPMySql
- Python爬取貓眼評分9.5的《海王》的3萬條評論Python
- html5案例--製作電影影評網HTML