Bootstrap 4 ändern Symbol im Kollaps

Question

Ich benutze Bootstrap 4 Alpha 6 Version. In meiner Seite habe ich mehrere Kollapsblöcke. Ich möchte das Symbol ändern, wenn der Benutzer diesen Block öffnet/schließt. Wie ich mehrere dieser Blöcke habe ich Klasse verwendet, aber es hat nicht funktioniert. Was habe ich falsch gemacht? P.S. Wenn ich id in JS verwende funktioniert gut, aber wie Sie sehen, ich habe mehrere Kollaps Block und nicht wollen "& einfügen".

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

Das Problem ist: Sie alle Ihre button und .collapse Elemente in der gleichen DOM Level sind, was bedeutet, wenn .collapse ‚s shown.bs.collapse oder hidden.bs.collapse Ereignis wird ausgelöst, die $(this).parent() im Ereignishandler Punkt t o .collapse 's übergeordnetes Element - das äußerste, das in Ihrem Code nicht angezeigt wird. Lass es uns als OUTER machen. Wenn Sie dann find, removeClass und addClass auf OUTER aufrufen, werden alle Symbole geändert, weshalb "es nicht funktionierte".

Um dieses Problem zu beheben, müssen Sie einen Einheitenwrapper erstellen, der eine Gruppe von button und .collapse Elementen enthält. Auf diese Weise zeigt $(this).parent() auf die Gruppe und nur das angeklickte Schaltflächensymbol wird geändert.

Ich habe eine jsfiddle für den Fix gemacht, bitte überprüfen.