jQuery单击显示元素

我认为您要寻找的是一种方法,以转到一系列div中的下一个div。

下面是一个工作示例的链接: http://jsfiddle.net/0uop9rzL/7/

在您当前的方法中,您使用的是 for-loop 其中你已经硬编码了你骑车经过的div的数量。即使你的逻辑 gall 函数实际上显示了下一个框,如果您想在将来添加其他div,该怎么办?更重要的是,为什么您需要遍历所有div 每次 单击 next 按钮

在我的示例中,我添加了 data-next 当前可见框的属性(利用 JQuery's data function ). 我可以使用 :visible 选择器(即。 mainBox.find("div:visible"); .

有很多方法可以解决这个问题,但您可能需要通过访问 http://api.jquery.com/

HTML格式

<div class="main">
    <button id="left_btn" >&lt;- </button>
    <button id="right_btn">-&gt;</button>
    <div id="pic_box">
        <div id="gall_one" data-next="#gall_one2">
             <h2>Lorem Ipsum1</h2>

            <img src="images/mlp1.png" allt="mlp" />
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
        <div id="gall_one2" data-next="#gall_one3">
             <h2>Lorem Ipsum2</h2>

            <img src="images/mlp2.png" allt="mlp" />
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
        <div id="gall_one3" data-next="#gall_one">
             <h2>Lorem Ipsum3</h2>

            <img src="images/mlp3.jpg" allt="mlp" />
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $("#pic_box  > div").hide();
    $("#pic_box  > div:first").show();
    $("#right_btn").click(function () {
        var mainBox = $("#pic_box");
        var activeBox = mainBox.find("div:visible");
        var nextBox = mainBox.find(activeBox.data("next"));
        activeBox.hide();
        nextBox.show();
    });
});

有很多方法可以做到这一点。一种方法是添加隐藏类

JavaScript:

$(".btn").on("click", function() {  //click on button

    var nextPrev = $(this).data("dir");  //determine if we are going back or forward

    var active = $(".pic_box > div:visible")  //get the current visible element
        .addClass("hidden");  //hide it
        var next;
        if (nextPrev==="prev") {
            next = active.prev();  //get previous div
            if(next.length===0) next = $(".pic_box > div:last");  //if there is no prev, select the last one
        } else {
            next = active.next();  //get next div
            if(next.length===0) next = $(".pic_box > div:first"); //if there is no next div, select the first one      
        }
        next.removeClass("hidden");  //take off the hidden class
});

HTML格式:

<div class="main">
    <button class="btn" data-dir="prev"><img id="left_btn" src="images/left_btn.png" alt="left" /></button>
    <button  class="btn" data-dir="next" ><img id="right_btn"src="images/right_btn.png" alt="right" /></button>

<div class="pic_box">
    <div  class="gall_one">
        <h2>Lorem Ipsum1</h2>
        <img  src="images/mlp1.png" allt="mlp" />
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </div>
    <div  class="gall_one2 hidden">
        <h2>Lorem Ipsum2</h2>
        <img  src="images/mlp2.png" allt="mlp" />
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </div>
    <div  class="gall_one3 hidden">
        <h2>Lorem Ipsum3</h2>
        <img  src="images/mlp3.jpg" allt="mlp" />
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </div>
    </div>

</div>

CSS:

.hidden { display:none }

不停摆弄

Example