Question

我是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">

Answer 1

问题是这一行：

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/

在jQuery密码显示/隐藏if-else条件不适用于按钮点击

1 个答案: