Selettore jQuery per le stesse classi

Question

Ho diversi div all'interno di un div OffersContainer. Alla pagina di caricamento mostro solo il primo div di OffersContainer. Quindi, dopo aver fatto clic su "Mostra altro", mostro i primi tre div e, infine, facendo clic su "Mostra altro" per la seconda volta, mostro tutti i div.

Problema: ho due OffersContainer alla volta. E voglio che questi due div. OffersContainer siano indipendenti l'uno dall'altro. Quello che succede in realtà è che quando per la prima volta clicco su OffersContainer's a sinistra mostro che si comporta perfettamente, mostra 3 div. Ma ora, quando clicco, mostro di più del lato destro di OffersContainer, mostrerà tutto invece di mostrare i primi 3 div. Significa che non funziona indipendentemente dall'altra div? Come posso farlo funzionare separatamente?

P.S: per qualche motivo entrambi questi div avranno la stessa classe OffersContainer quindi non posso cambiare il nome. Che cosa sto facendo di sbagliato? Sto usando selettori sbagliati?

Here is the Fiddle

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

Answer 1

Non conservare cliccare informazioni in varibale globale condivisa. Invece si può persistere nel nome della classe per ogni campata:

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

È possibile utilizzare i CSS per nascondere i relativi div elementi caricamento iniziale. Questo risolve il problema del contenuto degli altri elementi .OfferContainer completamente nascosto.

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

Da lì si può modificare la logica in modo che sia digitato il numero di elementi visibili, al posto della variabile click, in questo modo:

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

Questo perché quando fai clic su "Mostra altro" sul lato destro il var click è vero. È possibile memorizzare l'attributo click 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