Jquery学习笔记（2）--五角星评分
2024-10-15 09:19:50
网购五星评分模拟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
<span class="star">☆</span>
</div>
</body>
<script type="text/javascript">
var isclick = 0;
var clicknum = 0;
//鼠标滑过，编程黑五角星
$('span').mouseover(function(){
// if (isclick==0) {
var num = $(this).index();
// alert(num);
$('span').each(function(){
if ($(this).index()<=num) {
$(this).html('★');
}else{
if ($(this).index()>clicknum) {
$(this).html('☆');
}
}
});
// }
});
//鼠标离开div，变回空心五角星
$('div').mouseleave(function(){
if (isclick==0) {
$('span').each(function(){
if ($(this).index()>clicknum) {}
$(this).html('☆');
});
}else{
$('span').each(function(){
if ($(this).index()>clicknum) {
$(this).html('☆');
}
});
}
});
//鼠标点击，固定黑五角星，并且重新点击后重新固定，离开后不变
$('span').click(function(){
isclick = 1;
clicknum = $(this).index();
$('span').each(function(){
if ($(this).index()<=clicknum) {
$(this).html('★');
}else{
$(this).html('☆');
}
});
});
</script>
</html>
最新文章
- ubuntu安装navicat及常见问题解决
- Attempt to fetch logical page (...) in database 2 failed. It belongs to allocation unit xxxx not to xxx
- sql优化建议
- zoj 3795 Grouping tarjan缩点 + DGA上的最长路
- iOS开发之Objective-C与JavaScript的交互(转载)
- 机器学习算法一：K-近邻算法
- Guide to Database Migration from Microsoft SQL Server using MySQL Workbench
- 20169210《Linux内核原理与分析》第十二周作业
- Vivado的helloword计划（一个）：硬件project部分
- [Usaco2008 Nov]Buying Hay 购买干草[背包]
- Java 多线程详解（五）------线程的声明周期
- 错误代码： 1248 Every derived table must have its own alias
- 修改WordPress后台登录地址，提高安全性
- 实验-使用VisualVM或JConsole进行对程序进行性能分析
- [jzoj]3468.【NOIP2013模拟联考7】OSU!(osu)
- DevExpress ASP.NET v18.2新功能详解（三）
- BZOJ.4407.于神之怒加强版(莫比乌斯反演)
- li设置float后ul无法包裹li问题解决
- css3学习笔记三
- mybatis----Integer = 0 刷选不出来条件原因以及sql改法