Bootstrap-帶有jQuery的圖標切換

Question

我在嘗試切換Bootstrap圖標時遇到了一個小問題。 當我運行代碼時，它執行的功能與您首次單擊該按鈕時所期望的一樣，但是當我再次單擊時，它並沒有改變。 在這里，我的代碼和任何幫助將不勝感激！

<a><i class="icon-plus"></i></a>

<script>
  $(".icon-minus").click(function(){
    $(this).removeClass("icon-minus").addClass("icon-plus");
  });
  $(".icon-plus").click(function(){
    $(this).removeClass("icon-plus").addClass("icon-minus");
  });
</script>

更新1：

該圖標用於可折疊菜單，其代碼可在此處找到：)

Answer 1

jsBin演示

$(".icon-minus, .icon-plus").click(function(){
    $(this).toggleClass("icon-minus icon-plus");
});

如果您動態創建元素，則使用以下命令：

$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
    $(this).toggleClass("icon-minus icon-plus");
});

Answer 2

jQuery的選擇器選擇DOM元素，然后將click處理程序應用於它們。 更改元素上的類后，它不會重新評估選擇器。

您可能希望jQuery的delegate() / on()方法動態更改單擊該項目時觸發的處理程序。 Delegate與事件冒泡一起使用，並且將處理單擊並評估單擊的源是否與選擇器匹配（在單擊時），而不是與直接附加處理程序的.click() （在頁面顯示時）相匹配。 -load或運行代碼的任何時候）。

另一個解決方案是以某種方式更改處理程序，方法是評估現有元素上的類，或者使用toggleClass()來檢查一個類，然后將其反轉。

$(".icon-minus, .icon-plus").click(function() {
   var $this = $(this);
   if ($this.hasClass("icon-plus")) {
      $this.removeClass("icon-plus").addClass("icon-minus");
      return;
   }
   if ($this.hasClass("icon-minus")) {
      $this.removeClass("icon-minus").addClass("icon-plus");
      return;
   }
});

此方法將比使用on() / delegate()快一點on()因為它是在根處理程序處處理的，之后不會冒泡並不會進行檢查。 事件冒泡時也不中斷。 （即event.stopPropagation() ）

Answer 3

簡單的解決方案適用於Bootstrap 3。

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});