Question

我正在尝试使用jquery在每次点击时更改按钮的图标。我不明白为什么我的代码不起作用。有人可以帮忙吗？

HTML

<li class="navbar-right">
    <a href="#"><i class="fa fa-2x fa-bars" aria-hidden="true"></i></a>
</li>

的jQuery

$(document).ready(function(){
    var clicks;
    for (var clicks = 1; clicks++) {
        $('.fa').click(function() {
            if(clicks%2!==0){
                $(".fa").removeClass("fa-bars");
                $(".fa").addClass("fa-times");
            } else{
                $(".fa").removeClass("fa-times");
                $(".fa").addClass("fa-bars");
            }
        });
    }
});

Answer 1

您的代码存在一些问题。首先，您需要为0提供默认值for才能增加它。其次，click循环中的逻辑无效，并且不需要循环本身。您只需要在每次出现事件时递增if值。然后，toggleClass()语句中的模数将每隔一次更改元素上的类，您可以使用$(document).ready(function() { var clicks = 0; $('.fa').click(function() { if (clicks % 2 !== 0) { $(".fa").toggleClass("fa-bars fa-times"); } clicks++; }); });来简化，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul>
  <li class="navbar-right">
    <a href="#">
      <i class="fa fa-2x fa-bars" aria-hidden="true">Icon</i>
    </a>
  </li>
</ul>

{{1}}

每次点击都会更改图标

1 个答案: