本文介绍了如何使用jQuery实现五星评分功能。当鼠标悬停在星星上时，前方的空心星星变为实心；鼠标离开且未点击时，实心效果恢复为空心；点击后，实心效果保留；再次悬停并点击，效果更新；如只悬停不点击，则清除效果，恢复为全部空心。实现方式包括设置全局变量，监听鼠标悬停、点击和移出事件，动态调整星星的状态。
功能:
- 鼠标悬停在上方时,该空心五星及前面的空心五星均改为实心
- 鼠标不点击,鼠标离开时实心五星恢复空心
- 若鼠标点击,实心效果保留
- 当鼠标再次悬停其他位置并点击,效果更新
- 若鼠标再次悬停不点击,效果清除,恢复空心
思路:
- 设计全局变量,用于保持实心效果
- 鼠标悬停时,遍历所有星星,将发生悬停事件的星星以及所有位置在该星星之前的星星都改为实心
- 鼠标点击时,改变全局变量,改变星星状态,改变方法同上
- 鼠标移出时,判断全局变量,若满足要求,则清空效果,恢复空心;若不满足效果,则不清空,保持实心状态,之后初始化全局变量
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.0.min.js"></script>//引入jQuery文件
</head>
<body>
<table align="center">
<tr>
<td id="1">☆</td>
<td id="2">☆</td>
<td id="3">☆</td>
<td id="4">☆</td>
<td id="5">☆</td>
</tr>
</table>
<scr
最低0.47元/天 解锁文章
2301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
