按钮"show password"不起作用

Question

我想写一个按钮，从点显示密码。 我的意思是，只需将属性"类型"从密码更改为文本，当我再次单击该按钮时，密码应该被隐藏。

我的代码：

$(document).ready(function(){
var fieldType = $('input.password').attr("type");
$('.show_passwrd').on("click",function(){
if(fieldType == "password"){
$('input.password').attr("type","text");
}
else{
$('input.password').attr("type","password");
}
})
});

当我点击时，我的浏览器没有任何错误，什么都没有。

Answer 1

将检查当前type的代码移动到事件处理程序中。 每次单击.show_passwrd时，此值都会更改，需要重新计算。

jQuery(function($) {
$('.show_passwrd').on("click", function() {
var fieldType = $('input.password').attr("type");
if (fieldType == "password"){
$('input.password').attr("type","text");
} else {
$('input.password').attr("type","password");
}
});
});

需要注意的另一件事是，选择器input.password正在寻找CSS类为password的<input>标签。 如果它尚不存在，您可能需要添加它，或者更改选择器以按 ID 获取元素：

<input type="password" class="password">

Answer 2

就像 dana 建议的那样，您需要检查单击处理程序中的字段类型。此外，这可能是您的选择器的问题。我已经在下面展示了使JavaScript工作所需的HTML。

$(document).ready(function() {
$('.show_passwrd').on("click", function() {
var fieldType = $('input.password').attr("type");
if (fieldType == "password") {
$('input.password').attr("type", "text");
} else {
$('input.password').attr("type", "password");
}
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="password" value="password" />
<input type="button" class="show_passwrd" value="show password" />