jQuery點擊顯示元素

-3

請告訴我爲什麼元素不會被刪除並且不會輪流顯示？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並顯示以下做。

來源

2014-09-11 comSaaxov

這是什麼屬性'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(); 
    }); 
});

來源

2014-09-11 12:55:58 skeryl

有很多方法可以做到這一點。一種方法是剛剛添加的隱藏類

的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

來源

2014-09-11 13:01:16 epascarello

jQuery點擊顯示元素

回答

相關問題