javascript - How to show next article on click of a button - Stack Overflow

admin管理员组

文章数量:1417555

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

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

• javascript
• jquery

Share Improve this question Follow edited Sep 16, 2014 at 10:30 Benjamin asked Sep 16, 2014 at 10:16 BenjaminBenjamin 2,69022 gold badges2222 silver badges3434 bronze badges 5

• 1 Please include the JS code you've written in your question and fiddle. – Rory McCrossan Commented Sep 16, 2014 at 10:18
• @RoryMcCrossan jquery updated – Benjamin Commented Sep 16, 2014 at 10:22
• You're looking for a div that doesn't exist. – rybo111 Commented Sep 16, 2014 at 10:23
• @rybo111 sorry doesnt updated my fiddle – Benjamin Commented Sep 16, 2014 at 10:23
• @rybo111 fiddle updated – Benjamin Commented Sep 16, 2014 at 10:24

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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

You can go with this solution:

I have changed some css and html markup classes

Changed class name, added mon 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

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

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

http://jsfiddle/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

try this:-

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

Demo

本文标签： javascriptHow to show next article on click of a buttonStack Overflow