jQuery点击显示元素

问题描述：

请告诉我为什么元素不会被删除并且不会轮流显示？jQuery点击显示元素

<!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并显示以下做。

这是什么属性'allt'？ – melancia 2014-09-11 12:41:24

当你调试这个，特别是在哪里失败？ JavaScript控制台中是否有错误？点击处理程序是否被调用？当你浏览代码时，你的选择器是否会找到你期望他们找到的元素？请明确点。 – David 2014-09-11 12:41:41

你有一个for循环，它将马上删除所有它们...... – epascarello 2014-09-11 12:43:06

答

我认为你正在寻找的是一种方式去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");,

）找到当前可见的方框。有许多方法可以解决此问题，但您可能需要熟悉一些我向您展示的工具以及更多的JQuery的能力，通过访问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

jQuery点击显示元素

相关推荐