Jquery 如何对同一页面上的不同元素使用此显示密码功能？

我有一个显示密码功能，用于页面上的一个字段，并希望在同一页面上的另一个字段上使用该功能。我通过类添加了参考元素，但我不知道如何使它们都独立工作，有人能提供建议吗

html

---

jsiddle:

我所做的是给按钮添加了一个数据属性，以便为它们分配一个容器，因为您的容器不共享相同的类名，所以我的解决方案有点棘手，因为这可以通过多种方式完成

我还更改了变量名，但您可以将其更改回来

对于代码中的错误，下面是解释。 当我通读您的代码时，我看到mousedown/mouseup只关注其他输入所在的.input container而不是.password字段，mousedown/mouseup函数只关注其中一个。显示密码，就像在代码中有两个一样，因此，对于代码中的前一个错误，无论单击哪个按钮，它都只会触发.input容器中的函数

解决方案是，我为.show密码添加了一个.each，正如我在向按钮添加属性以存储它应该关注的容器之前所解释的那样

<div class="password-field">
  <input id="password-input" type="password">
  <label for="password-input">Password input</label>
  <button type="button" class="show-password active" data-container=".password-field">Show/Hide
    <i class="fa fa-eye"></i>
  </button>
</div>

<div class="container">
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <button type="button" class="show-password" data-container=".input-container">Show/Hide
    <i class="fa fa-eye"></i>
  </button>
</div>

对于JSFIDLE

在尝试提出更多问题之前，请先阅读。

    $('.show-password').mousedown(function(event) {
  this.togglePass = $(this).siblings('input') //how to make this work as wel??
  this.togglePass = $(".input-container").find('input'); // this one only working
  this.toggleIcon = $(this).find('i');

  $(this).toggleClass('active');
  $(this).attr('value', 'Hide');
  this.togglePass.attr('type', 'text');
  if(this.toggleIcon.length) {
    this.toggleIcon.toggleClass('icon-show-password');
  }
  else {
    $(this).text("Hide");
  }
}).mouseup(function(event) {
  $(this).toggleClass('active');
  this.togglePass.attr('type', 'password');
  $(this).attr('value', 'Show');

  if(this.toggleIcon.length) {
    this.toggleIcon.toggleClass('icon-show-password');
  }
  else {
    $(this).text("Show");
  }
});

<div class="password-field">
  <input id="password-input" type="password">
  <label for="password-input">Password input</label>
  <button type="button" class="show-password active" data-container=".password-field">Show/Hide
    <i class="fa fa-eye"></i>
  </button>
</div>

<div class="container">
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <div class="input-container">
    <input id="pin-code" type="password" maxlength="1" class="pin-input">
    <label for="pin-code">Password input</label>
  </div>
  <button type="button" class="show-password" data-container=".input-container">Show/Hide
    <i class="fa fa-eye"></i>
  </button>
</div>

$(".pin-input").keyup(function () {
  this.value = this.value.replace(/[^0-9\.]/g,'');

  if (this.value.length == this.maxLength) {
    var $next = $(this).parent().next('.input-container').find('.pin-input');

    if ($next.length) {
      $next.focus();
    }
    else {
      $(this).blur();
    }
  }
});

$('button.show-password').each(function(){
  var selected_container = $(this).data("container"); // Get button container value
  var selected_input = $(selected_container).find("input"); // Selected input withing container
  var selected_icon = $(this).find('i');

  $(this).mousedown(function(){
    $(this).toggleClass('active');
    $(this).attr('value', 'Hide');
    selected_input.attr('type', 'text');

    if(selected_icon.length > 0) {
      selected_icon.toggleClass('icon-show-password');
    }
    else {
      $(this).text("Hide");
    }
  }).mouseup(function(){
    $(this).toggleClass('active');
    $(this).attr('value', 'Show');
    selected_input.attr('type', 'password');

    if(selected_icon.length > 0) {
     selected_icon.toggleClass('icon-show-password');
    }
    else {
     $(this).text("Show");
    }
  });
});