jQuery实现仿五角星评分案例

小灰灰 2023-06-13 09:21 10阅读 0赞

### jQuery实现仿五角星评分案例 ###

这两周一直在做网页相关的，最近由于项目需求，又要重新捡起遗失已久的前端了(什么前端不前端，身为一颗螺丝钉，哪里需要往哪打)。

重拾`jQuery`的第一感受，这玩意用起来真的太舒服。由于要实现仿五角星评分的效果，故采用`jQuery`的方式实现。**图例如下，**

[ **点击进入演示地址**][Link 1]  
![案例演示][20191115123029751.png]

**案例描述：现在有五颗五角星，当我们鼠标在五角星上滑动时，对应的五角星以及它前面的五角星会被点亮；当我们鼠标离开五角星时，所有五角星都会熄灭；当我们点击五角星时，当前五角星以及它前面五角星会点亮，点击后移开鼠标点亮的五角星不变，如果继续在五角星上移动则会重现第一步。**

> **首先分析这个问题**
> 
> 在这个案例中，有鼠标进入事件，有鼠标离开事件，还有鼠标点击事件。
> 
> 鼠标进入可以用`mouseover`，鼠标离开可用`mouseout`。未发生点击事件时，当鼠标进入时只需要将对应的星星以及它前面的星星元素点亮即可；当鼠标离开时只需将所有的星星元素熄灭即可。
> 
> **点击事件发生时**：这时我们需要将当前星星以及它前面的星星元素的属性保存并不能改变，这里我们可以采用给被点亮的星星元素再设置一个属性值的方法。

*大家看文字解释可能有点迷糊，有种似懂非懂的感觉。话不多说，看了代码之后可能会解决你心中的迷惑。*

**show your code！**

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>五角星评分案例</title>
    		<style>
    			* {
         
    				padding: 0;
    				margin: 0;
    			}
    			.comment {
         
    				font-size: 40px;
    				color: yellow;
    			}
    			.comment li {
         
    				float: left;
    			}
    			ul {
         
    				list-style: none;
    			}
    		</style>
    		<script src="js/jquery-3.4.1.min.js"></script>
    		<script>
    			$(function() {
         
    				//获取所有的li绑定鼠标进入和鼠标离开和点击事件
    				$(".comment>li").mouseover(function() {
         
    					$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
    				}).mouseout(function() {
         
    					$(this).text("☆").prevAll("li").text("☆");
    					//获取属性index为10的这个li和这个li前面所有的li
    					$(".comment>li[index=10]").text("★").prevAll("li").text("★");
    				}).click(function() {
         
    					$(this).attr("index", "10").siblings("li").removeAttr("index");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="comment">
    			<li>☆</li>
    			<li>☆</li>
    			<li>☆</li>
    			<li>☆</li>
    			<li>☆</li>
    		</ul>
    	</body>
    </html>

*相信大家看了代码之后心中的疑惑会被解开。有什么不懂的地方欢迎在评论区留言 >\_<！*

[Link 1]: https://geminikk.github.io/gradeDemo/%E6%A1%88%E4%BE%8B/%E8%AF%84%E5%88%86%E6%A1%88%E4%BE%8B.html
[20191115123029751.png]: https://img-blog.csdnimg.cn/20191115123029751.png