jQuery .hide() funziona solo metà del tempo

Question

Questo potrebbe sembrare molto ovvio per alcune persone, ma davvero non riuscivo a capire perché qualcosa di simile potrebbe accadere, quindi sto cercando qualsiasi aiuto possibile!

Ho righe in espansione e ogni riga deve espandersi per mostrare i suoi dettagli quando si fa clic su o quando si preme il pulsante successivo. Mostrano e nascondono correttamente quando cliccato, ma non riesco a farlo funzionare quando viene premuto il pulsante successivo.

Questa è la parte .js:

var main = function() { 

var curQuantity1 = 0; 
var curQuantity2 = 0; 
var curQuantity3 = 0; 

$('.article').click(function() { 
    $('.description').hide(); 
    $('.article').removeClass('current'); 
    $(this).children('.description').show(); 
    $(this).addClass('current'); 
}); 

$(".next1").click(function() { 
    if (curQuantity1 + curQuantity2 + curQuantity3 == 3){ 
     console.log("Next clicked"); 

     var currentArticle = $('.current'); 
     var nextArticle = currentArticle.next(); 

     currentArticle.removeClass('current'); 
     nextArticle.addClass('current'); 

     $('.description').hide(); 
     $('.current').children('.description').show(); 
    } else { 
     alert("총 3통을 골라주세요"); 
    } 
}); 
...//code here takes care of updating curQuantity so they can add upto 3 
}; 

$(document).ready(main); 

Penso codice html incollare qui potrebbe rendere troppo lunga, ma lo farà, se necessario.

Sto vagamente indovinando che a un bambino potrebbe non essere consentito di modificare la sua classe genitore, ma non sono riuscito a trovare un modo per aggirarlo.

Grazie in anticipo per qualsiasi aiuto! Mi stavo perplesso per l'intera giornata :(

Answer 1

Dal .next1 è dentro .article, quando si fa clic sul pulsante Avanti, il clic viene anche inviato l'articolo che lo contiene, a causa di evento di bubbling. Quindi, prima della .next1 . cliccare gestore sta rivelando la voce successiva, quindi il .article click rivela il vecchio articolo la soluzione è quella di utilizzare event.stopPropagation() per fermare l'evento dal bubbling out:.

$(".next1").click(function(e) { 
    e.stopPropagation(); 
    if (curQuantity1 + curQuantity2 + curQuantity3 == 3){ 
     console.log("Next clicked"); 

     var currentArticle = $('.current'); 
     var nextArticle = currentArticle.next(); 

     currentArticle.removeClass('current'); 
     nextArticle.addClass('current'); 

     $('.description').hide(); 
     $('.current').children('.description').show(); 
    } else { 
     alert("총 3통을 골라주세요"); 
    } 
});