博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js之点击值发生变化
阅读量:6507 次
发布时间:2019-06-24

本文共 948 字,大约阅读时间需要 3 分钟。

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

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

实现的机制还是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代码这里就不贴了,有了这个思路,大家可以直接复用这段代码完成该功能。

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

转载地址:http://hpzfo.baihongyu.com/

你可能感兴趣的文章
vue从入门到进阶:计算属性computed与侦听器watch(三)
查看>>
java8-模拟hadoop
查看>>
前端面试总结(at, md)
查看>>
JavaScript 基础知识 - 入门篇(一)
查看>>
Webpack入门之遇到的那些坑,系列示例Demo
查看>>
002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
查看>>
Sequelize 中文文档 v4 - Getting started - 入门
查看>>
MySQL几个简单SQL的优化
查看>>
SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
查看>>
【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
查看>>
[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
查看>>
坑!为什么View.startAnimation不起作用?
查看>>
css属性的继承、初识值、计算值、当前值、应用值
查看>>
【159天】尚学堂高琪Java300集视频精华笔记(128)
查看>>
关于 Linux 进程的 UID、EUID、GID 和 EGID
查看>>
【162天】黑马程序员27天视频学习笔记【Day02-上】
查看>>
ComponentOne 2017 V2版本正式发布
查看>>
【mysql】环境安装、服务启动、密码设置
查看>>
Rancher如何对接Ceph-RBD块存储
查看>>
微信小程序实战练习(仿五洲到家微信版)
查看>>