Question

请告诉我为什么元素不会被删除而不能轮流显示？

<!DOCTYPE html> 
<html> 
<head> 

    <link href="styles/my_style.css" rel="stylesheet">
</head> 
<body>
    <div class="main">
    <img id="left_btn" src="images/left_btn.png" allt="left" />
    <img id="right_btn" src="images/right_btn.png" allt="right" />

    <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">
            <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">
            <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>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
</body>
</html>

脚本：

c$(document).ready(function(){
    $(".pic_box  > div").hide();
    $(".pic_box  > div:first").show();
    $("#right_btn").click(function(){

    for(var img1=0; img1<3; img1++){
        gall();
    }
    function gall(){
        $(".pic_box > div").show().prev("div").remove();
    }   
});

我想点击#right_btn删除一个div并显示以下内容。

Answer 1

我认为您正在寻找的是一种方式来转换为一系列div中的下一个div。

这是指向工作示例的链接：http://jsfiddle.net/0uop9rzL/7/

在您当前的方法中，您使用的是for-loop，其中您已经硬编码了您正在循环的div数。即使你的gall函数中的逻辑确实显示了下一个框，如果你想在将来添加额外的div，该怎么办？更重要的是，为什么每次点击next按钮时都需要遍历所有div ？

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

解决此问题的方法很多，但您可能希望通过访问http://api.jquery.com/
<强> HTML

<div class="main"> <button id="left_btn" ><- </button> <button id="right_btn">-></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(); }); });

Answer 2

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

<强> 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

jQuery单击显示元素

2 个答案: