Javascript 为什么显示/隐藏密码只在一个输入字段上工作

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

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

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

---

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

它不能与两个相同的ID一起工作。您有两次showPassword ID。重命名第二个，并为此ID创建相同的脚本。或者干脆改用class。

您有两个具有相同ID的

项，因此事件仅在第一个项上触发。最好使用
类
：

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


可见度
可见度
$（文档）.ready（函数（）{
$（“.showPassword”）。单击（函数（）{
var foo=$（this.prev（）.attr（“type”）；
如果（foo==“密码”）{
$（this.prev（）.attr（“type”，“text”）；
}否则{
$（this.prev（）.attr（“type”、“password”）；
}
});
});
希望您也希望如此


$（文档）.ready（函数（）{
$（“.showPassword”）。单击（函数（）{
var foo=$（this.prev（）.attr（“type”）；
如果（foo==“密码”）{
$（this.prev（）.attr（“type”，“text”）；
}否则{
$（this.prev（）.attr（“type”、“password”）；
}
});
});

可见度
可见度
您有两个
a id=“showPassword”
…使用class而不是id。因为id在dp文档中应该是唯一的。
<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>