jQuery .hide（）只能工作一半的時間

Question

對某些人來說這可能看起來很明顯，但我真的不知道爲什麼這樣的事情可能會發生，所以我正在尋找任何可能的幫助！

我已經擴大了行數，並且每行都應該展開以顯示其單擊時的細節，或者當按下下一個按鈕時。點擊時它們可以正確顯示和隱藏，但當按下下一個按鈕時，它無法工作。

這是.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); 

我覺得這裏粘貼HTML代碼可能會使它太長，但如果需要，將這樣做。

我隱約猜測孩子可能不允許修改其父類，但我找不到解決方法。

非常感謝您的幫助！我被困難了整整一天:(

Answer 1

由於.next1是.article裏面，當你點擊下一步按鈕，點擊也發送到包含它的文章，因爲事件冒泡。所以首先.next1 。單擊處理程序揭示下一個項目，然後點擊.article揭示了舊文章的解決方案是使用event.stopPropagation()以阻止汩汩流出事件：

$(".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통을 골라주세요"); 
    } 
});