前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery点击图片开启,再次点击图片关闭效果

jQuery点击图片开启,再次点击图片关闭效果

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

要求:jQuery点击图片开启,再次点击图片关闭效果 2:获取选中的图片的状态 并以整型的格式传给后端

3:获取并且渲染传给数据库的图片状态

代码语言:javascript
代码运行次数:0
运行
复制
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>下拉框select赋值</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>
            .staffContainer{
                display: none;
            }
        </style>
    </head>
    <body>
        <img id="bindStaff" class="bindclick" src="images/off.png">
        <button type="button" class="btn blue" id="addBtn">保存</button>
    </body>
    <script type="text/javascript">
        /* 实现图片切换 */
        $(".bindclick").click(function() {
            if ($("#bindStaff ").prop("src").indexOf("on") > -1) {
                $(this).attr("src", "images/off.png");
            } else {
                $(this).attr("src", "images/on.png");
            }
        })
        $("#addBtn").on("click", function() {
            var params = {
                bindStaff: $("#bindStaff ").prop("src").indexOf("on") > -1 ? 1 : 0,
            }
            alert(JSON.stringify(params))
            $.ajax({
                contentType: 'application/json',
                url: basePath + "/app",
                data: JSON.stringify(params),
                type: "post",
                success: function(data) {
                },
                error: function(data) {
                    layer.msg("服务器繁忙", {
                        icon: 5,
                        time: 1000
                    });
                }
            });
        })
    </script>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-07-07,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
用户名验证:限16个字符,支持中英文、数字、下划线
继续写一个用户名验证,验证规则,限16个字符,支持中英文、数字、下划线,当符合验证规则的时候,弹框提示正确,当出现特殊字符,不符合验证规则的时候,弹框提示错误,并且不执行下一步程序。
王小婷
2025/05/18
1030
Bootstrap Table写一个Demo
基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
王小婷
2019/05/17
1.6K0
JavaScript decodeURI() 函数
decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。 语法
王小婷
2021/06/01
6530
JavaScript decodeURI() 函数
bootstrap table点击修改按钮给弹框赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <
王小婷
2020/10/28
1.3K0
正则表达式同时验证手机和座机号码
JS同时验证固话和手机号正则表达式,验证规则: 1:当input框没有填写号码的时候,input为空,可通过验证 2:当手机号码填写正确的时候,可通过验证 3:当座机号码填写正确的时候,可通过验证 如果不通过,则出现提示信息,提示输入正确的手机号码座机号码。
王小婷
2019/08/07
5.3K0
jquery多组时间以对象数组形式保存
需求: 1:点击新增区域的按钮的时候,会新增一行输入框,可以选择输入数据,输入时间 2:输入完成之后,点击保存按钮,将输入的时间以对象数组的格式提交给后端 3:每一组时间是一个对象,每个对象包括开始时间和结束时间, 三组就是三个对象,存放在数组里面。 提交到后端的格式 {"criminalFences":[{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00"
王小婷
2020/09/27
1.1K0
复选框checkbox提交数据类型和方法
对应的渲染方法如下: jQuery数据结构渲染(4):复选框checkbox赋值 https://www.jianshu.com/p/3878ff8c76d9
王小婷
2020/05/26
1.5K0
复选框checkbox提交数据类型和方法
提交表单的时候验证手机号码和身份证号码
需求:在提交表单的时候,验证手机号码和身份证号码,如果不填写手机号码和身份证号码,就无需验证,如果填写手机号码和身份证号码,必须要填写正确的格式,如果不正确,则没有办法通过验证,出现弹框提示。
王小婷
2019/08/07
1.5K0
jQuery数据结构渲染(1):图片数组的渲染
作为一个前端开发,在日常工作中,会不断的请求接口,调用接口,再对接口的数据进行一定的处理,渲染在前端界面,尤其是在今天前后端分离的时代,这项技能是每个前端开发必备~
王小婷
2020/05/18
2.2K0
jQuery数据结构渲染(1):图片数组的渲染
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.2K0
jQuery数据结构渲染(4):复选框checkbox赋值
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
提交格式 "workFences": [ { "fenceId": "ew32w2wf232fwer23", "fenceName": "区域q" }, { "fenceId": "ew32w2wf232fw543r23", "fenceName": "区域b" } ], test.json {"msg":"查询成功","code":1,
王小婷
2022/03/29
2.9K0
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
jQuery带参跳转新页面,新页面获取url多个参数的办法
需求: a页面有多个参数 跳转到b页面 在b页面获取a页面带过来的参数 a.html
王小婷
2021/06/29
2.7K0
JQuery 获取选中多选框的value,合并成数组传给后台
需求: JQuery 获取选中多选框的value,合并成数组传给后台 在ajax请求的时候,需要给后端传一个参数 deviceId,这个 deviceId是一个list集合,也就是一个数组,需要把选中的几个数值放在这个数组里面,当做参数传递。
王小婷
2025/05/20
1040
JQuery 获取选中多选框的value,合并成数组传给后台
jQuery+ajax实现简单的上传图片功能
在前面的文章里面有写到,用vue上传图片的功能,vue-element-admin上传图片的功能:https://www.jianshu.com/p/383e1f2f4276,那如果是在jQuery里面,图片上传要怎么写?今天记录一个jQuery+ajax实现简单的上传图片功能。
王小婷
2020/10/28
1.2K0
javascript escape()和unescape()区别
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
王小婷
2021/07/13
2K1
jQuery带参数跳转,新页面获取url的参数id
a.html <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css
王小婷
2021/06/24
3.4K0
jquery点击按钮,添加一行input输入框
点击添加按钮的时候,会添加一行input输入框,使用jquery来实现一下。虽然现在前端开发小伙伴们都不用jquery了,但是,我还是决定要记录一下这个小demo,因为用到的比较多。
王小婷
2020/09/27
5K0
验证多个class相同的input框不为空
要求,页面有多个class相同的input输入框,在提交数据的时候,进行验证,验证input框不能为空,如果哪个为空,则弹出提示:
王小婷
2020/05/26
2.1K0
验证多个class相同的input框不为空
相关推荐
用户名验证:限16个字符,支持中英文、数字、下划线
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验