当前位置: 首页 > news >正文

js之点击值发生变化

点击值发生变化,应用场景,比如像阿里云那样我通常密码是以******的形式存在,我必须要点击查看,它才会以明文显示。

在实际开发中,比如以智能门锁为例,安装门锁时,有个叫密码输入框的表单,这个是选填项,可填可不填。如果不填,密码会以某种规则进行自动生成,当没有填写这一栏,将其他必填项填完并提交,后台响应安装成功,这时可点击门锁详情进入门锁-密码列表,这时会看到一个叫功能密码和动态密码,但是密码却是以******的形式显示,这时通过点击按钮查看即可显示明文密码。

实现的机制还是js,不过这里以jQuery的形式实现

js代码如下:

$(function(){
        var judge=1;
        content = $("#pwdsss_1");
        content2 = $("#pwdsss_2");
    $("#test001").click(function(event){
        
        if(judge){
            judge=0;
            content.text("972543");
        }else{
            judge=1;
            content.text("******");
        }
    });
    
    
    $("#test002").click(function(event){
        
        if(judge){
            judge=0;
            content2.text("678543");
        }else{
            judge=1;
            content2.text("******");
        }
    });
    
    
});
    

 

上述代码即可完成该功能,不过的参数值,通常不是写死的,这里为了讲解方便,暂时写死,参数值是可以通过某个选择器赋值的。

至于html代码这里就不贴了,有了这个思路,大家可以直接复用这段代码完成该功能。

这段代码很好理解的,用一段话概述:获得对应的选择器声明并赋值,通过对应的点击事件完成值变化。

相关文章:

  • 解决 wcf HTTP 无法注册 另一应用程序正在使用 TCP 端口 80
  • [树链剖分]luogu P2590 ZJOI 树的统计
  • linux中断线程化分析【转】
  • php linux 脚本语法解释
  • python之udp协议的套接字
  • PHP变量
  • AdTime:多屏互动 进化中的大数据营销
  • Unity2018新功能抢鲜 | Package Manager
  • 快递业频爆黑料,不如让机器人送货吧!
  • Java 基础 之 for 循环
  • BIND9 DoS漏洞CVE-2016-8864 绿盟科技发布技术分析与防护方案 北京有1435台设备受影响...
  • yum更新出错-解决
  • linux使用wget下载jdk并配置
  • 虚假信息成物联网“毒瘤”
  • 今天的考核题目: 你知道React和Vue的区别吗? skr,skr
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • @jsonView过滤属性
  • Angular2开发踩坑系列-生产环境编译
  • Create React App 使用
  • JAVA并发编程--1.基础概念
  • JS+CSS实现数字滚动
  • Linux CTF 逆向入门
  • Linux下的乱码问题
  • maven工程打包jar以及java jar命令的classpath使用
  • node-sass 安装卡在 node scripts/install.js 解决办法
  • Vim 折腾记
  • 二维平面内的碰撞检测【一】
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 可能是历史上最全的CC0版权可以免费商用的图片网站
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 如何解决微信端直接跳WAP端
  • 通信类
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • #vue3 实现前端下载excel文件模板功能
  • #图像处理
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • (c语言)strcpy函数用法
  • (C语言)二分查找 超详细
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (分布式缓存)Redis哨兵
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • ... fatal error LINK1120:1个无法解析的外部命令 的解决办法
  • ./configure,make,make install的作用(转)
  • .md即markdown文件的基本常用编写语法
  • .NET Core 中插件式开发实现
  • .NET委托:一个关于C#的睡前故事
  • .NET中 MVC 工厂模式浅析
  • .sys文件乱码_python vscode输出乱码
  • @Bean, @Component, @Configuration简析
  • [AIGC] 使用Curl进行网络请求的常见用法
  • [C#][opencvsharp]opencvsharp sift和surf特征点匹配