jQuery Selektor für gleiche Klassen

Question

Ich habe mehrere divs in einem OffersContainer Div. Beim Laden der Seite zeige ich nur das erste div von OffersContainer. Wenn ich dann auf "Zeige mehr" klicke, zeige ich die ersten drei divs und beim zweiten Klick auf "show more" zeige ich alle divs.

Problem ist, ich habe zwei OffersContainer auf einmal. Und ich möchte diese zwei OffersContainer div voneinander unabhängig. Was tatsächlich passiert, ist, wenn ich zum ersten Mal auf links klicke OffersContainer's zeige mehr es verhält sich perfekt, d. H. 3 divs. Aber jetzt, wenn ich klicke, zeige mehr von rechtem Seite OffersContainer's div es wird alles zeigen, anstatt die ersten 3 divs zu zeigen. Es bedeutet, dass es nicht unabhängig von dem anderen Div funktioniert? Wie kann ich es separat ausführen lassen?

P.S: Aus irgendeinem Grund werden beide Divs dieselbe Klasse OffersContainer haben, so dass ich den Namen nicht ändern kann. Was mache ich falsch? Verwende ich falsche Selektoren?

Here is the Fiddle

And Here is the Fiddle with just one OffersContainer div just in case anyone wants to see

Answer 1

Bewahren Sie keine Informationen in gemeinsamen globalen Varibale klicken. Stattdessen können Sie es in den Klassennamen bestehen bleiben für jede Spanne:

$(".OffersContainer > div:gt(0)").hide(); 

$(".OffersContainer > span").click(function() { 
    $(this).siblings($(this).hasClass('click') ? "div:gt(0)" : "div:lt(3)").slideDown(); 
    $(this).addClass('click'); 
}); 

Demo:https://jsfiddle.net/qo55rmuy/2/

Answer 2

Sie CSS verwenden können, die entsprechenden div Elemente auf Anfangslast zu verbergen. Dies löst das Problem, dass die Inhalte der anderen Elemente vollständig ausgeblendet sind.

.OffersContainer > div:nth-child(n+2) { 
    display: none; 
} 

Von dort aus können Sie die Logik ändern, so dass es auf die Anzahl der sichtbaren Elemente verkeilt ist, anstelle der click Variable, wie folgt aus:

$(".OffersContainer > span").click(function() { 
    var $siblings = $(this).siblings(); 
    var visibleLength = $siblings.filter(':visible').length; 
    $siblings.filter(visibleLength != 1 ? "div:gt(0)" : "div:lt(3)").slideDown(); 
}); 

Updated fiddle

Answer 3

Das ist, weil, wenn Klicken Sie auf "Mehr anzeigen" auf der rechten Seite, der Var-Klick ist wahr. Sie können die Klick-Attribut speichern in jQuery.data

$(".OffersContainer > span").click(function(){ 
    var click = $.data(this, "click") || false; 
    $(this).siblings(click ? "div:gt(0)" : "div:lt(3)").slideDown(); 
    $.data(this, "click", true); 
}); 

Demo