密码框显示/隐藏效果

用jQuery做效果的实现思路：通过点击事件和if语句判断class的值，从而改变图标class的值和input框的类型，达到密码框和图标的切换

 

HTML代码：

<p class="pwdPosition">
                <label for="password"> 密码</label>
                <!--class的图标默认闭眼 -->
                <i class="iconfont icon-eye1" id="eye"></i>
                <input id="password" name="password" type="password" placeholder="请输入密码">
            </p>

JS代码：

// 设置密码是否可见
//首先通过id，设置图标的点击事件
$('#eye').click(function () {
    let img = $("#eye");
    let psw = $("#password")
    //判断如果是闭眼的情况下
    if (img.attr("class") == "iconfont icon-eye1") {
        //通过改变class属性，更改图标为睁眼，input框类型为text
        img.attr({ "class": "iconfont icon-eye" })
        psw.attr({ "type": "text" })
    }
    //判断如果是睁眼的情况下
    else {
        //通过改变class属性，更改图标为闭眼，input框类型为password
        img.attr({ "class": "iconfont icon-eye1" })
        psw.attr({ "type": "password" })
    }
})