Question

我有一个页面上字段的显示密码功能，并希望在同一页面上的另一个字段上使用相同的功能。我通过课程添加了参考元素，我不知道如何让它们独立工作，有人可以建议吗？

HTML

    <div class="password-field">
  <input id="password-input" type="password">
  <label for="password-input">Password input</label>
  <button type="button" class="show-password active">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">Show/Hide
    <i class="fa fa-eye"></i>
  </button>
</div>

jquery的：

    $('.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");
  }
});

jsfiddle：https://jsfiddle.net/zincy/48az4j2o/2/

Answer 1

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

我也更改了你的变量名，但你可以改回它们。

对于代码中的错误，以下是解释。当我读完你的代码时，我发现mousedown / mouseup只关注.input-container而不是.password-field，其他输入位于其中，而mousedown / mouseup函数只关注一个{{1}在你的代码中，你有两个，所以你的代码中的上一个错误，无论你点击哪个按钮，它都只会触发.show-password中的函数。

解决方案是我为.input-container添加了.each()，就像我在向按钮添加属性之前所解释的那样，它存储了应该关注的容器。

.show-password

的jQuery

<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>

对于jsFiddle https://jsfiddle.net/48az4j2o/4/

如何在同一页面上为其他元素使用此show password函数？

1 个答案: