javascript - Bootstrap 密码输入切换功能不起作用

Question

这是我的 HTML 表单:-

<input name="inputPassword" type="password" id="inputPassword" placeholder="Password.."><span class="add-on"><i class="icon-eye-open"></i></span>

这是我对 Jquery 的尝试 [我不是 Jquery 学生 :(]

<script type="text/javascript">

$(".icon-eye-open").click(function(){
    $('.icon-eye-open').removeClass('icon-eye-open').addClass('icon-eye-close');
    document.getElementById("inputPassword").setAttribute('type', 'text');
});

$(".icon-eye-close").click(function(){
    $('.icon-eye-close').removeClass('icon-eye-close').addClass('icon-eye-open');
    document.getElementById("inputPassword").setAttribute('type', 'password');
});

</script>

所以，您可能已经猜到，我正在尝试做什么。我实际上是在尝试替换单击类的类 [在类之间切换]，而不是尝试将属性从密码更改为文本，反之亦然。

这是行不通的。

这是 jsfiddle 演示:- http://jsfiddle.net/gR5FH/

你能建议/帮我找出我的错误吗。

谢谢

Answer 1

试试这个

$(".icon-eye-open").on("click", function() {
$(this).toggleClass("icon-eye-close");
var type = $("#inputPassword").attr("type");
if (type == "text")
{ $("#inputPassword").attr("type", "password");}
else
{ $("#inputPassword").attr("type", "text"); }
});