Erste-ID von der zusammenklappbaren div in JQuery und Bootstap

Question

ich mehrere haben zusammenklappbar div (mit Bootstrap)

<div> 
    <a href="#id1" data-toggle="collapse"> 
     <div class="col-lg-12">Title</div> 
     <div class="image">Image</div> 
    </a> 
    <div id="id1" class="collapse"> 
     <div class="col-lg-12">Description</div> 
    </div> 
</div> 
<div> 
    <a href="#id2" data-toggle="collapse"> 
     <div class="col-lg-12">Title</div> 
     <div class="image">Image</div> 
    </a> 
    <div id="id2" class="collapse"> 
     <div class="col-lg-12">Description</div> 
    </div> 
</div> 

Und haben JQuery

$('#id1').on('show.bs.collapse', function() { 
      $(".image").addClass('hidden'); 
     }); 

$('#id1').on('hidden.bs.collapse', function() { 
     $(".image").removeClass('hidden'); 
    }); 

I (es kann mehr als 100 sein) wollen Hinzufügen Klasse auf show.bs.collapse (das ist von Bootstrap) und entfernen hidden Klasse auf hidden.bs.collapse' Mit dem JQ-Code oben kann ich dies nur mit einem div, das id1 hat. Aber wie kann ich das unabhängig machen? Vielen Dank.

Answer 1

Id r bezieht sich auf ein Element im DOM. Daher sollten Sie stattdessen Klassen verwenden. Daher sollten Sie divs basierend auf ihren Klassen auswählen.

Nachfolgend ist eine mögliche Lösung:

<div> 
    <a href="#id1" data-toggle="collapse"> 
     <div class="col-lg-12">Title</div> 
    </a> 
    <div class="some-class collapse ad-col-2"> 
     <div class="col-lg-12">Description</div> 
     <div class="image"></div> 
    </div> 
</div> 
<div> 
    <a href="#id2" data-toggle="collapse"> 
     <div class="col-lg-12">Title</div> 
    </a> 
    <div class="some-class collapse ad-col-2"> 
     <div class="col-lg-12">Description</div> 
     <div class="image"></div> 
    </div> 
</div> 

JQuery:

$('.some-class').on('show.bs.collapse', function() { 
     $(".image").addClass('hidden'); 
    }); 

$('.some-class').on('hidden.bs.collapse', function() { 
    $(".image").removeClass('hidden'); 
}); 

Answer 2

Versuchen Sie nicht auf die Elemente von ids zu abonnieren, sondern durch Elementtyp

$('a').on('show.bs.collapse', function() { 
    $(this).next().find("div.image")[0].addClass('hidden'); 
}); 

$('a').on('hidden.bs.collapse', function() { 
    $(this).next().find("div.image")[0].removeClass('hidden'); 
}); 

Wo

$(this) 

next() 

sollte einen Zeiger auf das kollabierte/nicht kollabierten Element zurückgeben soll Zeiger auf das nächste Element verschieben (div id = "id1" als Beispiel)

find("div.image")[0] 

wird div mit der Klasse „Bild“ finden und nehmen Sie die erste gefundene Element

dann können Sie das Bild in diesem Block ausblenden oder anzeigen, ohne ids

Wenn Sie mit

$(".image").addClass('hidden'); 

dies verstecken Sie alle Bilder in allen Blöcken (nicht nur in diesem einen, die zusammengebrochen ist)