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代码这里就不贴了，有了这个思路，大家可以直接复用这段代码完成该功能。

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