JQuery查看下一個類的行

我對JQuery非常陌生，所以我創建了自己的燈箱，並提供了一個退出按鈕，它非常棒。我只是想知道如何做到這一點，所以我可以有一個Next和Previous按鈕，它會查看下一個圖像或div與分配給它的適當的類。例如，我的HTML：JQuery查看下一個類的行

<button id="button1">Click Here</button> 

<div id="view" class="outter"> 
    <img src="http://go.iomega.com/static/img/x_button_close.png" class="exit_button" id="close_view" /> 
     <div class="inner"> 
      <h1>stuff inside of the first div</h1> 
     </div> 
    <button id="previous">Prev</button><button id="next">Next</button> 
</div> 

<div id="view" class="outter"> 
    <img src="images/closebox.png" class="exit_button" id="close_view" /> 
     <div class="inner"> 
      <h1>stuff inside of the second div</h1> 
     </div> 
</div>

我的CSS

.outter{ 
    display:none; 
    width:620px; 
    height:380px; 
    top:20%; 
    left:17.5%; 
    position:absolute; 
    z-index:2; 
} 
.inner{ 
    width:600px; 
    height:330px; 
    background-color:white; 
    border:1px solid #000; 
    -moz-box-shadow:0px 0px 10px #111; 
    -webkit-box-shadow:0px 0px 10px #111; 
    box-shadow:0px 0px 10px #111; 
    margin-top:15px; 
    z-index:1; 
} 
.exit_button{ 
    float:right; 
    z-index:3; 
}

而且我的JQuery

$(document).ready(function(){ 
     $('#button1').click(function(){ 
      $('#view').fadeIn(750); 
     }); 
     $('#close_view').click(function(){ 
      $('#view').fadeOut(); 
     }); 
});

這是對所有在的jsfiddle http://jsfiddle.net/9cU5C/29/

這一切工作正常但我希望能夠在課堂上添加一大堆div呃「，然後讓下一個按鈕翻轉到下一個」outter「分類的div，反之亦然。我希望我能夠正確地解釋這一點，聽起來不笨，對於JQuery我很新，我喜歡這樣做，讓自己更好地理解它。我嘗試谷歌的問題，並發現不能拿出任何我可以去工作。

感謝一幫傢伙！ -Mike

來源

2012-03-07 user1053263

首先，快速評論。我似乎今天看到了很多。你應該*永遠不會*擁有兩個具有相同ID的東西。如果兩件事有共同點，它們應該在同一個班上。一個ID唯一標識一個元素，以便於檢索和識別。 – 2012-03-07 07:17:59

我開始更多地玩弄它，「有點」有我喜歡的東西，但只有當你點擊下一個按鈕，你不能做更多的然後像這樣的2個div http://jsfiddle.net/9cU5C/36/ – user1053263 2012-03-07 07:18:48

@JeffB哦，我的壞。我現在就改變它。 – user1053263 2012-03-07 07:19:52

make use或.next（），.prev（）和.closest（）。另外，在你的'下一個'和'上一個'按鈕上設置類。

僞：

$('.next').click(function() { 
    $('.outter').hide(); 
    $(this).closest('outter').next('outter').show(); 
}); 

$('.previous').click(function() { 
    $('.outter').hide(); 
    $(this).closest('outter').prev('outter').show(); 
});

的概念是隱藏所有的元素，再進行相應的一個可見。

完成學習練習後，請檢查燈箱的代碼並查看它是如何完成的。首先嚐試總是很棒的，然後找出最好的方法。

來源

2012-03-07 07:27:47 rkw

非常感謝您花時間閱讀本文。我現在正在工作。我會讓你知道它是怎麼回事！ – user1053263 2012-03-07 07:30:20

我幾乎可以開始工作，玩了一下，非常接近這個工作。我到目前爲止http://jsfiddle.net/9cU5C/84/ – user1053263 2012-03-07 07:51:12

@ user1053263：非常好。我以上面的代碼引導你誤入歧途。你的HTML結構並不是我所期望的：http://jsfiddle.net/9cU5C/108/ – rkw 2012-03-07 08:14:47

JQuery查看下一個類的行

回答

相關問題