單擊事件后更改字體真棒圖標

Question

在html中，我有兩個超贊字體圖標的鏈接，一個加號和一個減號。 我只希望加號圖標首先加載。 單擊加號圖標后，它將運行一個功能並打開垂直導航欄。 在此階段，我希望加號圖標變為減號。 然后，當單擊減號圖標時，該欄關閉，該圖標將變回加號。

這是html：

 <nav>
     <a href="#"><i class="fa fa-plus-circle" style="font-size:20px;"></i></a>
     <a href="#"><i class="fa fa-minus-circle" style="font-size:20px;"></i></a>
 </nav>

這是js：

var clicked = false;
$('.fa-plus-circle').click(function() {
    if (clicked == false) {
      $('div.vertical-nav').animate({
        'right': 0
      });
      clicked = true;

    } else {
      $('div.vertical-nav').animate({
        'right': -250
      });
      clicked = false;
    }

  });

})

Answer 1

您不需要兩個鏈接和兩個圖標，只需更改圖標即可（請注意，我添加了一個中性類toggler ）：

<nav>
     <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a>
</nav>

然后切換兩個類，它們將交替出現（請參閱***注釋）：

var clicked = false;
$('.toggler').click(function() { // ***
    if (clicked == false) {
        $('div.vertical-nav').animate({
            'right': 0
        });
        clicked = true;

    }
    else {
        $('div.vertical-nav').animate({
            'right': -250
        });
        clicked = false;
    }
    $(this).toggleClass("fa-plus-circle fa-minus-circle"); // ***
});

例：

 var clicked = false; $('.toggler').click(function() { // *** if (clicked == false) { $('div.vertical-nav').animate({ 'right': 0 }); clicked = true; } else { $('div.vertical-nav').animate({ 'right': -250 }); clicked = false; } $(this).toggleClass("fa-plus-circle fa-minus-circle"); // *** }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <nav> <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

旁注：該函數可以簡單得多，不需要clicked變量：

$('.toggler').click(function() {
    var $this = $(this);
    var toggled = $this.hasClass("fa-minus-circle");
    $('div.vertical-nav').animate({
        'right': toggled ? -250 : 0
    });
    $this.toggleClass("fa-plus-circle fa-minus-circle");
});

（當然，如果您需要其他功能，可以繼續clicked ...）

例：

 $('.toggler').click(function() { var $this = $(this); var toggled = $this.hasClass("fa-minus-circle"); $('div.vertical-nav').animate({ 'right': toggled ? -250 : 0 }); $this.toggleClass("fa-plus-circle fa-minus-circle"); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <nav> <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>