在两个输入中显示和隐藏密码

Question

请告诉我如何隐藏密码确认字段。 我可以隐藏密码字段，但第二个字段不起作用，没有响应

这是我的输入代码

<div class="mb-3">
              <label class="form-label">New password</label>
              <div class="input-group input-group-flat">
              <input type="password" name="password" id="password" class="form-control">
              <span class="input-group-text">

                <span toggle="#password" class="ti ti-eye toggle-password"></span>

              </span>
            </div>
      </div>
            <div class="mb-3">
              <label class="form-label">Confirm password</label>
              <div class="input-group input-group-flat">

              <input type="password" name="confirm_password" id="confirm_password" class="form-control">
              <span class="input-group-text">
                  <span toggle="#password" class="ti ti-eye toggle-password2"></span>

            </div>
            </div>

我的 js

$(".toggle-password").click(function() {
  $(this).toggleClass("ti-eye-off");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

$(".toggle-password2").click(function() {
  $(this).toggleClass("ti-eye-off");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

我尝试通过复制代码来更改变量，但它仍然不起作用。 更改字段上的图标眼睛仍然隐藏

Answer 1

您正在尝试将 attr 更改为输入，但此变量是跨度。 所以你需要通过 id 找到输入并且它有效。

这将成为;这将是

$(".toggle-password").click(function() {
  $(this).toggleClass("ti-eye-off");
  // var input = $($(this).attr("toggle"));  WRONG
  var input = $("#password");
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

此外，如果您想隐藏/显示两个输入，请按类名而不是 id 查找。

我为您制作了一个基本片段，供您在现场观看。

 $(".toggle__password").click(function() { $(this).toggleClass("password--hidden"); const input = $(".password"); if (input.attr("type") === "password") { input.attr("type","text"); } else { input.attr("type", "password"); } });

 .toggle__password { background:red }.password--hidden { background:green }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input type="password" value="hello" class="password"/> <input type="password" value="bye" class="password" /> <span class="toggle__password password--hidden"> Hidden </span> </div>