1

这是我的 HTML 表单：-

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

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

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

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

谢谢

4

2 回答 2

4

尝试这个

$(".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"); }
});
于 2013-06-14T11:38:36.010 回答
1

您的问题是当您开始侦听事件时该元素$(".icon-eye-close")不存在click，因此代码永远不会运行。您可以通过使用唯一的事件处理程序来防止这种情况click，然后在其中切换类和输入类型。

试试这个 HTML：

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

有了这个 JS：

$("#visibilitySwitch").click(function(){
    $(this)
        .toggleClass('icon-eye-open')
        .toggleClass('icon-eye-close');
    if ($('#inputPassword').attr('type') == 'password')
        $('#inputPassword').attr('type', 'text')
    else
        $('#inputPassword').attr('type', 'password')
});
于 2013-06-14T11:47:24.290 回答