javascript - 如何在单击按钮时显示下一篇文章

Question

我需要在单击按钮时隐藏和显示不同的文章。这就像一步一步的指导。这里有下面的代码块

<article class="content-1">Content 1
    <button type="button" class="continue">Continue</button>
</article>
<article class="content-2">Content 2
    <button type="button" class="continue">Continue</button>
</article>
<article class="content-3">Content 3
    <button type="button" class="continue">Continue</button>
</article>

JQUERY

$('.continue').click(function()
    $(this).parents('div').next('article').show();
});

现在单击.continue 按钮 我需要隐藏当前文章并显示下一篇文章。任何人都可以帮我解决这个问题提前谢谢。

注意:到达最后一个 article 应该停止该功能。

DEMO

Answer 1

你的js有一些错误。您可以尝试以下操作:

$('.continue').click(function () {

    if ($(this).parent("article").next().length > 0) { //check if there is more articles
        $(this).parent("article").next().show(); //show next article
        $(this).parent("article").hide(); //hide present article
    }
});

fiddle