首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery点击图片来回切换功能

jQuery点击图片来回切换功能

作者头像
王小婷
发布于 2025-05-20 05:02:32
发布于 2025-05-20 05:02:32
38400
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。

下面是一个小的demo示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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点击图片来回切换功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
在项目里,有时候会写这样的开关效果,点击开关来回切换,也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。
王小婷
2025/05/19
2730
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
jQuery数据结构渲染(4):复选框checkbox赋值
1:当返回值是字符串的时候 data.json: { "circle": "2;3;4;5;6;1" } 示例代码: <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="viewport" content="width=device-width, initial-scale=1">
王小婷
2020/05/18
1.3K0
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery实现点击开关图片切换
原型大概是这样的 image 需求:点击右侧的蓝色眼睛,会变成 关键代码: /* 实现图片切换 */ $(".imgclick").toggle(function(){ $(this).attr(
王小婷
2018/06/01
10.9K0
面试笔记:unshift、push、shift、pop比较
王小婷
2025/05/19
1240
面试笔记:unshift、push、shift、pop比较
Web前端学习 第4章 jQuery 2 jQuery常用方法
上一章我们讲解了使用jQuery选择器获取元素,并通过一些方法来操作元素,本章我们讲解事件的概念,通过事件我们可以加强用户与浏览器的交互性,例如可以实现当用户点击某个元素的时候,对元素做一些操作,或是移动鼠标,对元素做一些操作。
学习猿地
2020/06/18
2.1K0
jQuery鼠标悬停的时候图片替换
需求:当鼠标放在按钮上的时候,按钮图片会变成另外一张图片,但鼠标离开的时候,图片恢复原本状态。
王小婷
2019/09/19
5.2K0
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9.5K0
jQuery
jQuery实现点击图标div循环放大缩小功能
很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小时间不断的切换图标状态(箭头向里面,或者箭头向外面)
王小婷
2025/05/18
1760
jQuery实现点击图标div循环放大缩小功能
jQuery基础
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数 关键代码: <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
8K0
jQuery基础
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王瑞MVP
2022/12/28
5.6K0
jquery入门
运用jQuery时,需要在页面中引入jQuery文件 jQuery的hello world <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>helloworld</title> <!-- 1. 在页面中引入jQuery支持 --> <script src="js/jquery-1.12
周小董
2019/03/25
3.2K0
[jQuery笔记] 小图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小图片切换示例</title> <script src="js/jquery-1.8.3.min.js"></script> <style> //定义img标签的宽度和高度 img{ width:500px; height:300px
行 者
2019/12/10
4.1K0
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.5K0
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
下载:https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css  或者官方下载:https://fontawesome.com/download
杨校
2019/06/14
8870
JQuery的学习
JQuery基础: 1. 概念: * 一个JavaScript框架,简化JS开发。 * jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 * JavaScript
Rochester
2020/09/01
17.7K0
【Java 进阶篇】JQuery 事件绑定之事件切换:让页面动起来
欢迎来到这个充满动感的 JQuery 事件绑定之旅!在这篇博客中,我们将深入研究 JQuery 中的事件切换,让你的页面焕发出活力和互动。无论你是前端小白还是有一定经验的开发者,相信这篇文章都会对你有所帮助。
繁依Fanyi
2023/11/20
5360
【Java 进阶篇】JQuery 事件绑定之事件切换:让页面动起来
三、jQuery属性操作
2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript
Dreamy.TZK
2020/06/16
4.1K0
三、jQuery属性操作
前端学习之jQuery
[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
超蛋lhy
2018/08/31
3.4K0
22.jQuery(实例)
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.8K0
前端(四)-jQuery
$(this)就是将这个dom对象转换成jquery对象,就可以对这个对象进行操作;
化羽羽
2022/10/28
9.3K0
相关推荐
jquery实现点击图片切换为另一图片,再次点击恢复到原图片
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档