使用 toggleClass 单击它时更改眼睛图标

Question

我是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') 时，图标保持在第一张图片中，它没有改变。

我该如何解决这个问题？

Answer 1

您可以通过将 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>

Answer 2

因为 class fa fa-eye-slah 在 icon-click 获得点击时没有删除

添加这个以检查条件 class 在 id icon

$(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>

Answer 3

您需要在每次点击时删除和添加 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>

使用 toggleClass 单击它时更改眼睛图标

Changing eye icon when clicking on it with using toggleClass

html

javascript

font-awesome