javascript - 为什么显示/隐藏密码仅适用于一个输入字段

Question

我有两个输入字段。一个用于密码，另一个用于确认密码。我想为两个输入字段显示/隐藏密码功能。

我已经编写了相同的代码，但它只适用于密码输入字段。

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
$("#showPassword").click(function(){
    var foo = $(this).prev().attr("type");
    if(foo == "password"){
        $(this).prev().attr("type", "text");
    } else {
        $(this).prev().attr("type", "password");
        }
    });
});
</script>

样式.css

#showPassword{
    position:absolute;
    right: 0px;
    top: 12px;
    color: #000;
}

如何使确认密码字段具有显示/隐藏功能？

Answer 1

您有两个具有相同 id 的元素，因此仅在第一个元素上触发该事件。最好使用 class 代替:

<div class="input-field col s12 clear password-button">
    <input name="old_password" ng-model="form.password" id="old_password" type="password" class="validate">
    <a id="password" class="showPassword"><i class="material-icons">visibility</i></a>
</div>

<div class="input-field col s12 clear password-button">
    <input name="new_password1" ng-model="form.password1" id="new_password" type="password" class="validate">
    <a id="password_confirm" class="showPassword"><i class="material-icons">visibility</i></a>
</div>


<script type="text/javascript">
$(document).ready(function() {
  $(".showPassword").click(function() {
    var foo = $(this).prev().attr("type");
    if (foo == "password") {
      $(this).prev().attr("type", "text");
    } else {
      $(this).prev().attr("type", "password");
    }
  });
});
</script>