Javascript 如何单击按钮显示下一篇文章

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

<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>

现在单击

。继续
按钮
我需要隐藏当前文章并显示下一篇文章。有人能帮我解决这个问题吗？谢谢

注意：到达最后一篇文章应停止该功能

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

      var next = $(this).closest('article').next();
      //check if next article is present or not
        if(next.length!=0)
        {
            $('.continue').closest('article').hide();
            next.show();
        }
     });
});


您可以非常简单地这样做：

$('button.continue').click(function(){
  $(this).parent().hide().next().show();
});

不过，你还没有解释最后该做什么。您可能会忽略上一篇文章中的“继续”按钮


更新：如果你想知道为什么你的小提琴不起作用：


您没有在小提琴上选择jQuery
您省略了第1行中的
{
您在第2行引用了
div
而不是
文章
你忘了
.hide（）
这篇文章

您可以非常简单地这样做：

$('button.continue').click(function(){
  $(this).parent().hide().next().show();
});

不过，您还没有解释最后要做什么。您可能会忽略上一篇
文章中的“继续”按钮


更新：如果你想知道为什么你的小提琴不起作用：


您没有在小提琴上选择jQuery
您省略了第1行中的
{
您在第2行引用了
div
而不是
文章
你忘了
.hide（）
这篇文章
您可以使用此解决方案：

我已经更改了一些css和html标记类

更改了类名，添加了通用类名

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

CSS

.content:not(:first-of-type) {
    display:none;
}

您可以使用此解决方案：

我已经更改了一些css和html标记类

更改了类名，添加了通用类名

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

CSS

.content:not(:first-of-type) {
    display:none;
}

尝试以下方法：先隐藏所有文章，然后查找下一篇文章以显示它，如果下一篇文章不存在，则停止该功能

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

      var next = $(this).closest('article').next();
      //check if next article is present or not
        if(next.length!=0)
        {
            $('.continue').closest('article').hide();
            next.show();
        }
     });
});

尝试以下操作：先隐藏所有文章，然后查找下一篇文章以显示它，如果下一篇文章不存在，则停止该功能

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

      var next = $(this).closest('article').next();
      //check if next article is present or not
        if(next.length!=0)
        {
            $('.continue').closest('article').hide();
            next.show();
        }
     });
});

您可以使用
最近的（）
来获取父文章。然后您可以使用
.next（）
与
一起使用
.hide（）

剧本

您可以使用
最近的（）
来获取父文章。然后您可以使用
.next（）
与
一起使用
.hide（）

剧本

试试这个：-

$('button').click(function(){
var ar = $(this).parent('article');
if (ar.next().length)
{
    ar.hide().next().show();
 }
});

试试这个：-

$('button').click(function(){
var ar = $(this).parent('article');
if (ar.next().length)
{
    ar.hide().next().show();
 }
});

您的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
    }
});

您的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
    }
});

请在问题和提琴中包含您编写的JS代码。@RoryMcCrossan jquery updated您正在寻找一个不存在的
div
。@rybo111抱歉没有更新我的fiddle@rybo111fiddle Updated请在问题和fiddle中包含您编写的JS代码。@RoryMcCrossan jquery Updated您正在寻找一个
 div
不存在。@rybo111抱歉没有更新我的fiddle@rybo111fiddle Updated当它到达最后一篇文章时，它应该停止它的功能。我不确定你为什么不在最后一篇文章中省略这个按钮。感谢你发现了我犯的错误，这就是关键。我真的欠你的。一旦它到达最后一篇文章，它应该停止它的功能我不知道你为什么不在最后一篇文章中省略这个按钮。谢谢你发现了我犯的错误。我真的欠你。太好了，但我需要一个。它到达最后一篇文章时，我需要停止这个函数。我对
prev
$（this.parents（'article'）.hide（）.prev（）.show（）做了同样的操作
而且它不再工作了。你能帮我吗？你是说你创建了另一个按钮来转到上一个吗？是的，只是一个返回按钮用于ma pageOh我注意到按钮是通用的，它不依赖任何文章，它粘贴到它的父部分。这很好，但我需要一个。它到达最后一篇文章时，我需要停止该功能。我对prev
$（这个）。父（'article'）.hide（）.prev（）.show（）；
，它不再工作了。你能帮助我吗。你的意思是你创建了另一个按钮转到上一个吗？是的，只是一个ma页面的后退按钮哦，我注意到这个按钮是通用的，它不依赖任何文章，它会粘在父部分。