显示密码图标

Question

我有这个HTML..。

<div class="signin-form-label-group">
        <input type="password" id="password" name="password" class="form-control"
               placeholder="Password"
               required>
        <label for="password">Password</label>
        <span toggle="#password" class="mdi mdi-eye-off toggle-password"></span>
      </div>

和这个jQuery：

$(".toggle-password").click(function() {
      $(this).toggleClass("mdi mdi-eye");
      var input = $($(this).attr("toggle"));
      input.type === "password" ? input.type = "text" : input.type = "password";
    });

我使用的是材料设计图标。问题是，当单击eye off图标时，会显示文本，但图标不会更改为eye。有没有办法解决这个问题？

编辑:我发现问题实际上是...默认情况下，该类具有class="mdi-eye-off toggle-password mdi"。当单击关闭视线时，就会发生这种情况...class="mdi-eye-off toggle-password mdi-eye"当然，由于切换类，mdi-eye off应该已经被删除了。但它还没有。为什么？如何解决？

Answer 1

像这样使用以显示密码HTML

<div class="signin-form-label-group">
    <input type="password" id="password" name="password" class="form-control"
           placeholder="Password"
           required>
    <label for="password">Password</label>
    <span toggle="#password" class="mdi mdi-eye-off toggle-password" onclick="myFunction(this)">Eye</span>
</div>

<script>
    function myFunction(e) {

      var x = document.getElementById("password");
      if (x.type === "password") {
          e.classList.add('mdi-eye')
        e.classList.remove('mdi-eye-off')
        x.type = "text";
      } else {
          e.classList.add('mdi-eye-off')
        e.classList.remove('mdi-eye')
        x.type = "password";
      }
    }
</script>

Answer 2

试试这个jQuery。

$(".toggle-password").on('click', function() {
    $(this).toggleClass("your-toggle-class");
    var input = $("#password");
    if (input.attr("type") === "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");
    }

});