Jquery输入类型切换功能

Question

我制作了一个google登录页面，如果用户单击眼睛图标，输入类型也会从密码更改为文本和图标，反之亦然。代码在此处-

$(document).ready(function(){
  $("#field").on('focus',function(){
$(".mail_placeholder",".pass_placeholder").css("display","none");
    });
    $("#icon").on('click',function(){
var notVisible = $("#pass_field").attr("type","password");
 if (notVisible){
  $("#icon").attr("class","fas fa-eye-slash");
  $("#pass_field").attr("type","text");
  }
  else if(notVisible = false){
    $("#icon").attr("class","fas fa-eye");
  $("#pass_field").attr("type","password");  
  }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" class="mail_field" id="text_field" required>
            <div class="mail_placeholder">Enter your email here</div>
            <input type="password" class="pass_field" id="pass_field" required><i class="fas fa-eye" id="icon" style="position:relative; right:6.5%; color:grey;"></i>
            <div class="pass_placeholder">Enter your password here</div>

Answer 1

您只需要检查属性类型，以下操作将不起作用，因为您正在更改输入类型而没有获得属性type值：

var notVisible = $("#pass_field").attr("type","password")

应该类似于以下代码段：

$(document).ready(function () {
  $("#field").on("focus", function () {
    $(".mail_placeholder", ".pass_placeholder").css("display", "none");
  });
  $("#icon").on("click", function () {
    var notVisible = $("#pass_field").attr("type");
    if (notVisible === "password") {
      $("#icon").attr("class", "fa fa-eye-slash");
      $("#pass_field").attr("type", "text");
    } else {
      $("#icon").attr("class", "fa fa-eye");
      $("#pass_field").attr("type", "password");
    }
  });
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" class="mail_field" id="text_field" required />
<div class="mail_placeholder">Enter your email here</div>
<input type="password" class="pass_field" id="pass_field" required /><i class="fa fa-eye" id="icon" style="position: relative; right: 6.5%; color: grey;"></i>
<div class="pass_placeholder">Enter your password here</div>