为什么显示/隐藏密码仅在一个输入字段上起作用

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>

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