jQuery .hide()仅工作了一半时间

时间:2015-05-01 06:34:42

标签: javascript jquery html

这对某些人来说可能看起来非常明显,但我真的无法弄清楚为什么会发生这样的事情,所以我正在寻找任何可能的帮助!

我有扩展行,每行都应展开以显示其详细信息,或者在按下下一个按钮时显示。它们在单击时会正确显示和隐藏,但是当按下下一个按钮时,我无法使其工作。

这是.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代码可能会使它太长,但如果需要,也会这样做。

我模糊地猜测可能不允许孩子修改其父类,但我无法找到解决方法。

提前感谢您的帮助!我整天都难过了:(

1 个答案:

答案 0 :(得分:2)

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