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

Question

I need to hide and show different articles on click of a button. This is like step by step instruction. Here I have the code block below

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

Now on click of the .continue button I need to hide the present article and show the next article. Can anyone help me out to solve this thanks in advance.

Note: Reaching the last article should stop the function.

DEMO

Answer 1

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

You could quite simply do this:

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

You haven't explained what to do at the end, though. Presumably you will omit the continue button from the last article ?

---

Update: if you're wondering why your fiddle didn't work:

• You didn't select jQuery on the fiddle
• You omitted the { from line 1
• You referenced div rather than article on line 2
• You neglected to .hide() the article

Answer 2

You can go with this solution:

I have changed some css and html markup classes

Changed class name, added common class name

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

use closest() to find nearest parent.

$(".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

Try this : hide all article first then find next article to show it, if next article not present then stop the function.

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

You can use closest() to get the parent article. Then you can use .next() in with .hide()

Script

$('.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

You have some errors in your js. You can try following:

$('.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

try this:-

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

Demo