jquery一次更改多个输入类型

Question

我已经创建了一些其他线程，但到目前为止还没有任何有效的答案。

我有这个代码：

jQuery(function ($) {
$('.nm-myaccount-login-inner .form-row .lawrence_password span.required').append(
"<div class='hide-show'><span toggle='#password' class='fa fa-fw field-icon toggle-password fa-eye'></span></div>");

$('.nm-myaccount-login-inner .form-row .lawrence_register_password span.required').append(
"<div class='hide-show'><span toggle='#password' class='fa fa-fw field-icon toggle-password fa-eye'></span></div>");
});

jQuery(function($){
  $(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});


});

这样做是在“.lawrence_password span”和“lawrence_register_password span”中添加一个可点击的图标。 然后当一个人点击该图标时，输入密码的类型将从：<input type="password"> 更改为<input type="text">，因此密码变得可见。

但这只会影响我的第一个输入字段，而不是我的所有<input type="password">

我希望这个 jquery 函数适用于所有 <input type="password">

我的html：

<p class="form-row form-row-wide">
                    <label for="password" class="lawrence_password">Password <span class="required">*<div class="hide-show"><span toggle="#password" class="fa fa-fw field-icon toggle-password fa-eye-slash"></span></div></span></label>
                    <input class="input-text" type="text" name="password" id="password">
                </p>

注册密码输入与此相同，只有“lawrence_password_register”类。

这可能吗？谢谢！

Answer 1

我认为您需要做的就是使用class 而不是id。如果您在<div> 中更改<span> 的toggle="someClass" 属性，其中每个<input type="password"/> 都有class="someClass" 类。

下面是一个示例，我在输入上设置class="password"，然后在您的<span toggle=".password">...上设置，这就是您需要更改的全部内容。

jQuery(function ($) {
  $('.lawrence_password span.required').append(
  "<div class='hide-show'><span toggle='.password' class='fa fa-fw field-icon toggle-password fa-eye'>Toggle Button</span></div>");

  $('.lawrence_register_password span.required').append(
  "<div class='hide-show'><span toggle='.password' class='fa fa-fw field-icon toggle-password fa-eye'>Toggle Button</span></div>");

  $(".toggle-password").click(function() {
    var input = $($(this).attr("toggle"));

    if (input.attr("type") === "password") {
      input.attr("type", "text");
    } else {
      input.attr("type", "password");
    }
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-wide">
    <label for="password" class="lawrence_password">Password <span class="required">*     </span></label>
    <input class="input-text password" type="password" name="password" id="password">
</p>
<p class="form-row form-row-wide">
    <label for="password" class="lawrence_register_password">Password Register<span class="required">*</span></label>
    <input class="input-text password" type="password" name="password" id="password">
</p>