Javascript 引导密码输入切换功能不工作

这是我的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>

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

这是行不通的

以下是JSFIDLE演示：-

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

谢谢你试试这个

$(".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"); }
});

试试这个

$(".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"); }
});

---

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

请尝试以下HTML：

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

---

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

请尝试以下HTML：

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

---

w00t！这是工作：D非常感谢：w00t！这是有效的：D非常感谢：嗯，我已经投了以上的答复我的答案。但也非常感谢你的回复。。我正在通过你们慢慢地学习jquery。再次非常感谢。我已经投票决定回答我的答案。但也非常感谢你的回复。。我正在通过你们慢慢地学习jquery。再次非常感谢。