Bootstrap 4 changer l'icône dans l'effondrement

Question

J'utilise bootstrap 4 alpha 6 version. Dans ma page j'ai plusieurs blocs d'effondrement. Je veux changer d'icône lorsque l'utilisateur ouvre/ferme ce bloc. Comme j'ai plusieurs de ces blocs, j'ai utilisé la classe mais ça n'a pas marché. Quel est le problème que j'ai fait? P.S. Lorsque j'utilise id dans JS fonctionne bien, mais comme vous le voyez, j'ai plusieurs bloc de collapse et ne veulent pas "copier & coller".

html:

<div class="card"> 
    <div class="card-header"> 
     <div class="d-flex align-items-center justify-content-between"> 
       <button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects"> 
        <i class="fa fa-eye" aria-hidden="true"></i> 
       </button> 
     </div> 
    </div> 
    <div class="card-block"> 
     <div class="collapse" id="collapse-projects"> 
      ***SOME CONTENT*** 
     </div> 
    </div> 
</div> 

<div class="card"> 
    <div class="card-header"> 
     <div class="d-flex align-items-center justify-content-between"> 
       <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks"> 
        <i class="fa fa-eye" aria-hidden="true"></i> 
       </button> 
     </div> 
    </div> 
    <div class="card-block"> 
     <div class="collapse" id="collapse-tasks"> 
      ***SOME CONTENT*** 
     </div> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
      $('.collapse') 
       .on('shown.bs.collapse', function() { 
        $(this) 
         .parent() 
         .find(".fa-eye") 
         .removeClass("fa-eye") 
         .addClass("fa-eye-slash"); 
       }) 
       .on('hidden.bs.collapse', function() { 
        $(this) 
         .parent() 
         .find(".fa-eye-slash") 
         .removeClass("fa-eye-slash") 
         .addClass("fa-eye"); 
       }); 
     }); 

Answer 1

Le problème est: tous vos button et .collapse éléments sont dans le même niveau DOM, ce qui signifie que lorsque l » shown.bs.collapse.collapse ou hidden.bs.collapse événement est déclenché, le $(this).parent() dans le point de gestionnaire d'événements t o Le parent de .collapse - le parent le plus à l'extérieur qui n'est pas affiché dans votre code. Faisons comme OUTER. Ensuite, lorsque vous appelez find, removeClass etsur OUTER, toutes les icônes seront modifiées, ce qui explique pourquoi "cela n'a pas fonctionné". Pour résoudre ce problème, vous devez créer un wrapper d'unité contenant un groupe d'éléments button et .collapse. De cette manière, $(this).parent() pointe sur le groupe et seule l'icône du bouton cliqué est modifiée.

J'ai fait un jsfiddle pour le correctif, s'il vous plaît vérifier.