6

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：

このアイコンは折りたたみ可能なメニュー用であり、そのコードはここにあります:)

4

3 に答える 3

14

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");
});
于 2012-07-16T16:26:18.657 に答える
1

jQueryのセレクターはDOM要素を選択し、クリックハンドラーをそれらに適用します。要素のクラスを変更した後、セレクターを再評価することはありません。

おそらく、jQueryのdelegate()/on()メソッドで、アイテムがクリックされたときに起動されるハンドラーを動的に変更する必要があります。Delegateはイベントバブリングと連携し、クリックを処理し、クリックのソースがセレクター（クリック時）と一致するかどうかを評価します。.click()これは、ハンドラーを直接アタッチするものとは対照的です（ページの読み込み時またはいつでも）コードが実行されました）。

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()また、バブリングイベントの中断の影響を受けません。（すなわちevent.stopPropagation()）

于 2012-07-16T16:26:09.817 に答える
0

Bootstrap3では簡単なソリューションが機能しました。

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});
于 2013-10-22T19:01:59.913 に答える