您现在的位置是:首页 > Javascript
当前栏目
jQuery点击图片来回切换功能
2023-03-15 23:27:01 时间
在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。
下面是一个小的demo示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div>
<img class="imgclick" src="images/off.png"/>
</div>
</body>
<script>
/* 实现图片切换 */
$(".imgclick").toggle(function() {
$(this).attr("src", "images/off.png");
}, function() {
$(this).attr("src", "images/on.png");
}).attr("src", "images/on.png");
</script>
</html>
但是这里需要注意的问题是 toggle() 方法在 jQuery 版本 1.8 中[被废弃](javascript:NewWindow('/try/deprecated.htm');),在版本 1.9 中被移除。
所以换个demo 实现一下jQuery点击图片来回切换功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<img class="button" src="images/checked.png">
</body>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
//这是一个全局变量
var kg = true; //给一个开关并赋值,用来进行后面的 if else 条件判断
$(".button").click(function() { //给button按钮一个点击事件
if (kg) { //进行判断 //attr() 方法设置或返回被选元素的属性值
$(this).attr("src", "images/check.png") //这里一定要放另外的一张图,不然当点击时,会实现不了切换的效果
} else {
$(this).attr("src", "images/checked.png")
}
kg = !kg; //这里的感叹号是取反的意思,如果你没有写,当你点击切换回第一张图片时,就会不生效
})
</script>
</html>
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件