Bootstrap - Basculement des icônes avec jquery

Question

J'ai un petit problème en essayant de faire basculer une icône de Bootstrap. Lorsque j'exécute le code, il fait ce qui est prévu, la première fois que vous cliquez sur l'icône, il bascule, mais lorsque je clique à nouveau, il ne change pas. Voici mon code et toute aide sera appréciée !

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

Mise à jour 1 :

Cette icône est destinée à un menu pliable dont le code se trouve à l'adresse suivante aquí :)

Answer 1

Démonstration de jsBin

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

Ou ceci si vous créez vos éléments de manière dynamique :

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

Answer 2

Le sélecteur de jQuery sélectionne les éléments du DOM puis leur applique le gestionnaire de clic. Il ne réévalue pas le sélecteur après avoir modifié les classes de l'élément.

Vous voulez probablement le delegate() / on() de jQuery pour modifier dynamiquement le gestionnaire qui est déclenché lorsque l'élément est cliqué. Le délégué fonctionne avec le bouillonnement d'événements et traitera le clic et évaluera si la source du clic correspond au sélecteur (au moment du clic), contrairement à la méthode .click() qui attache le gestionnaire directement, une fois (au moment du chargement de la page ou lorsque le code a été exécuté).

Une autre solution consiste à modifier le gestionnaire d'une manière ou d'une autre, soit en évaluant la classe de l'élément existant, soit en utilisant la méthode suivante toggleClass() qui vérifiera la présence d'une classe puis l'inversera.

$(".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;
   }
});

Cette méthode sera légèrement plus rapide que l'utilisation de on() / delegate() parce qu'elle est gérée par le gestionnaire de racine et non par une bulle et un contrôle ultérieurs. Il n'est pas non plus sensible aux ruptures dans la bulle d'événements. (ex. event.stopPropagation() )

Answer 3

Une solution simple a fonctionné pour Bootstrap 3.

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