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 button我需要隐藏当前文章并显示下一篇文章。任何人都可以帮助我提前解决这个问题。

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

DEMO

Answer 1

http://jsfiddle.net/kaqr6ysn/4/

你可以简单地这样做：

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

但是，你还没有解释最后要做什么。大概你会省略上一个article的继续按钮？

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

你没有在小提琴上选择jQuery
您从第1行

{

您在第2行引用了div而不是article
您忽略了.hide()文章

Answer 2

您可以使用此解决方案：

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

更改了班级名称，添加了公共班级名称

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

使用closest()查找最近的父级。

$(".continue").on("click",function(){
    if($(this).closest(".content").next(".content").length > 0){
       $(this).closest(".content").hide();
       $(this).closest(".content").next(".content").show();
    }
});

<强> CSS

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

Demo

Answer 3

试试这个：首先隐藏所有文章然后找下一篇文章展示它，如果下一篇文章不存在则停止该功能。

$(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();
        }
     });
});

<强> Demo

Answer 4

您可以使用closest()获取父文章。然后，您可以.next()使用.hide()

脚本

$('.continue').on('click', function(){
    var article = $(this).closest('article');    
    if(article.next('article').length){
        article.next('article').show();
    }else{
        $('article').first().show(); //If you want to use continuous loop use it else just delete this line
    }    
    article.hide()
})

DEMO

Answer 5

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

Answer 6

试试这个： -

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

Demo

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

6 个答案:

Demo