Question

我想写点按钮显示密码。我的意思是，只需将属性“type”从密码更改为文本，当我再次单击该按钮时，密码应该隐藏。

我的代码：

$(document).ready(function(){
  var fieldType = $('input.password').attr("type");

  $('.show_passwrd').on("click",function(){
      if(fieldType == "password"){
          $('input.password').attr("type","text");
      }
      else{
          $('input.password').attr("type","password");
      }
  })
});

我的浏览器中没有任何错误，只是当我点击时，没有任何错误。

Answer 1

将检查当前type的代码移动到事件处理程序中。每次点击.show_passwrd并且需要重新计算时，此值都会更改。

jQuery(function($) {
    $('.show_passwrd').on("click", function() {
        var fieldType = $('input.password').attr("type");
        if (fieldType == "password"){
            $('input.password').attr("type","text");
        } else {
            $('input.password').attr("type","password");
        }
    });
});

需要注意的另一件事是，选择器input.password正在寻找CSS类<input>的{{1}}标记。您可能必须添加它，如果它已经存在或更改选择器以按ID获取元素：

password

Answer 2

像dana建议的那样，你需要检查click处理程序中的fieldType。此外，它可能是您的选择器的问题。我已经展示了使JavaScript工作所需的HTML。

$(document).ready(function() {
  $('.show_passwrd').on("click", function() {
    var fieldType = $('input.password').attr("type");
    if (fieldType == "password") {
      $('input.password').attr("type", "text");
    } else {
      $('input.password').attr("type", "password");
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="password" value="password" />
<input type="button" class="show_passwrd" value="show password" />

按钮“显示密码”无效

2 个答案: