jQuery-五角星評分案例

Twjin￥發表於2020-11-13
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>

相關文章