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 msgstr "и" span Law_register_password ". Затем, когда человек нажимает на значок, пароль ввода изменит свой тип с: <input type="password"> на <input type="text">, поэтому пароль станет видимым.

Однако это влияет только на мое первое поле ввода, а не на все мои <input type="password">

Я хочу, чтобы эта функция jquery применялась ко всем <input type="password">

My 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. если вы измените атрибут toggle="someClass" на <span> в <div>, где каждый <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>