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