时间戳

首页 > 解决方案 > 在 jquery 密码显示/隐藏 if-else 条件不适用于按钮 cick

javascript - 在 jquery 密码显示/隐藏 if-else 条件不适用于按钮 cick

问题描述

我是 jQuery 的新手。

只是我想建立一个密码显示/隐藏程序。

我已经编写了一些代码（如下），并且程序第一次正常工作 - 单击“显示”按钮后显示密码。但随后“隐藏”功能不起作用。

在我的代码中，该if部分每次都在运行，但该else部分从不执行。这里有什么问题？

$("#btn").click(function() {

  if ($("#pass").attr("type", "password")) {
    $("#pass").attr("type", "text");
    $("#btn").attr("value", "Hide")
  } else {
    $("#pass").attr("type", "password");
    $("#btn").attr("value", "Show")
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Password : <input type="password" id="pass">
<input type="button" id="btn" value="Show">

标签： javascriptjqueryhtml

解决方案

问题是这一行：

if($("#pass").attr("type","password")){

$("#pass").attr("type","password")正在设置“类型”属性的值，而不是将其与任何东西进行比较。您需要做的是获取该值，然后将其与您正在检查的值进行比较：

if($("#pass").attr("type") == "password")) {

这是一个完整的工作示例：

注意我还添加了变量来表示按钮和文本框，因为在相同元素上重复调用 jQuery 构造函数效率低下。

$(document).ready(function() {

  var btn = $("#btn");
  
  btn.click(function() {
    var pass = $("#pass");

    if (pass.attr("type") == "password") {
      pass.attr("type", "text");
      btn.attr("value", "Hide")
    } 
    else {
      pass.attr("type", "password");
      btn.attr("value", "Show")
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title>Password show/hide in Jquery</title>
</head>

<body>
  Password : <input type="password" id="pass">
  <input type="button" id="btn" value="Show">
</body>
</html>

您可能还希望查看 jQuery 文档以帮助您理解：http ://api.jquery.com/attr/

推荐阅读