使用jQuery使用“下一个上一个"按钮显示隐藏div? [英] show hide divs using Next Previous button using jQuery?

问题描述

例如，我有10个<div>，我想在下一个按钮上单击并显示每个<div>.单击上一个按钮时显示上一个<div>. 如何使用jQuery?

for e.g i have 10 <div>, i want to show each <div> on next button click & show previous <div> on previous button click. how to do it using jQuery?

推荐答案

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

这是一个非常简单的HTML示例.

This is a very simple HTML example.

使用像这样的简单jQuery代码:

With a simple jQuery code like this one:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

进一步的解释: 第一个块将隐藏除第一个之外的每个div(e是jQuery每个函数中的一个计数器).

For further explanations: The first block will hide every div except first one (e is a counter in each function of jQuery).

另外两个块处理按钮的单击. 我们正在寻找可见的div，然后单击以显示下一个(请参阅jquery的next()函数或上一个div(jquery的prev()函数).

The two other blocks handle the click on the buttons. We are looking for the visible div and on click we are display next (see next() function of jquery or previous div (prev() function of jquery).

如果没有下一个div(单击下一个按钮)，我们将隐藏可见的div并显示第一个.

If there is no next div (on next button click) we are hiding the visible div and displaying the first one.

此处的在线示例: http://jsfiddle.net/hsJbu/

这篇关于使用jQuery使用“下一个上一个"按钮显示隐藏div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！