使用 toggleClass 单击它时更改眼睛图标
[英]Changing eye icon when clicking on it with using toggleClass
问题描述
我是 html 和 UI 方面的新手。 我正在尝试添加一个眼睛图标来显示和隐藏我的页面的密码。
$(document).ready(function() { $("#icon-click").click(function() { $("#icon").toggleClass('fas fa-eye'); var input = $("#pass"); if (input.attr("type") == "text") { input.attr("type", "password"); } else { input.attr("type", "text"); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="form-group input-group"> <input type="password" class="form-control form-control-lg rounded-0" placeholder="Şifre" id="pass" /> <a href="#" class="text-dark" id="icon-click"> <i class="fa fa-eye-slash" id="icon"></i> </a> </div>
当页面打开时，关闭眼睛图标。 当我单击它时，我希望它打开并显示密码。 打开页面时，眼睛图标关闭（第一张图片）。 当我单击它时，它也会显示密码，但图标会消失（第二个）。 我只是无法解决这个问题。 我认为问题出在.toggleClass('fas fa-eye')部分。 当我将 .toogleClass 部分更改为.toggleClass('fa-eye')时，图标保持在第一张图片中，它不会改变。
我怎样才能解决这个问题？
3 个解决方案
解决方案1
1 2021-04-14 07:40:11
因为 class fa fa-eye-slah在icon-click获取点击时没有被删除
将此添加到 id icon处检查条件 class
$(document).ready(function() { $("#icon-click").click(function() { if ($("#icon").hasClass("fa fa-eye-slash")) { //check the class $("#icon").removeClass( "fa fa-eye-slash" ).addClass( "fas fa-eye" ); }else if($("#icon").hasClass("fas fa-eye")){ $("#icon").removeClass( "fas fa-eye " ).addClass( "fa fa-eye-slash" ); } var input = $("#pass"); if (input.attr("type") == "text") { input.attr("type", "password"); } else { input.attr("type", "text"); } }); });
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <body> <div class="form-group input-group"> <input type="password" class="form-control form-control-lg rounded-0" placeholder="Şifre" id="pass" /> <a href="#" class="text-dark" id="icon-click"> <i class="fa fa-eye-slash" id="icon"></i> </a> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> </body>
解决方案2
1 已采纳 2021-04-14 07:41:51
您需要在每次点击时删除并添加fa-eye-slash和fa-eye ，具体取决于之前存在的内容。 你可以这样做： -
$(document).ready(function() { $("#icon-click").click(function() { var className = $("#icon").attr('class'); className = className.indexOf('slash')?== -1: 'fa fa-eye'. 'fa fa-eye-slash' $("#icon"),attr('class'; className); var input = $("#pass"). if (input.attr("type") == "text") { input,attr("type"; "password"). } else { input,attr("type"; "text"); } }); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group input-group"> <input type="password" class="form-control form-control-lg rounded-0" placeholder="Şifre" id="pass" /> <a href="#" class="text-dark" id="icon-click"> <i class="fa fa-eye-slash" id="icon"></i> </a> </div>
解决方案3
0 2021-04-14 07:38:20
您可以通过将此 javascript 添加到if语句来实现：
e.target.classList.remove('fa-eye');
e.target.classList.add('fa-eye-slash');
而else语句则相反。
测试：
$(document).ready(function() { $("#icon-click").click(function(e) { // capture the event e here var input = $("#pass"); if (input.attr("type") == "text") { input.attr("type", "password"); e.target.classList.remove('fa-eye'); // e.target is what is clicked (icon) e.target.classList.add('fa-eye-slash'); } else { input.attr("type", "text"); e.target.classList.remove('fa-eye-slash'); e.target.classList.add('fa-eye'); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="form-group input-group"> <input type="password" class="form-control form-control-lg rounded-0" placeholder="Şifre" id="pass" /> <a href="#" class="text-dark" id="icon-click"> <i class="fa fa-eye-slash" id="icon"></i> </a> </div>
使用jquery点击眼睛图标时如何显示和隐藏密码
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.