使用jQuery一次切換一個項目

Question

我有一系列隱藏的div，我希望能夠單獨切換其可見性。

的HTML：

 <h2>Section One</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

    <h2>Section Two</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

    <h2>Section Three</h2> 
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p> 
    <input type="button" class="show-video" value="Video" /> 
    <div class="video-holder"></div> 

jQuery的：

<script type="text/javascript"> 
    $(document).ready (function() { 
    $('.video-holder').hide(); 
    $('.show-video').click(function() { 
    $('.video-holder').toggle('slow'); 
    }); 
    }); 
</script> 

我會喜歡讓他們切換一次一個一定的幫助。

謝謝。

Answer 1

這裏有一個小竅門：

<script type="text/javascript">//<!-- 

    $(document).ready (function() { 
    $('.video-holder').hide(); 
    var i = 0; 
    $('.show-video').each(function(){ 
     $(this).click(function(){ 
      $('.video-holder:eq('+$(this).data('idf')+')').toggle('slow'); 
     }); 
     $(this).data('idf',i); 
     i++; 
    }); 
    }); 

// --></script> 

使數據的使用等。

Answer 2

聽起來像你想從jQuery UI的accordion。

Answer 3

問題是，jQuery是有幫助的，並假設你想切換video-holder類的所有元素。 （您使用的是假設早些時候，當你隱藏與$('.video-holder').hide();每一個視頻支架。

如果你想給每個.show-video元素綁定到只有視頻立即顯示以下，那麼你想使用jQuery的next()功能。所以，你的代碼會看起來是這樣的：。！。

$('.video-holder').hide(); 
$('.show-video').click(function() { 
    $(this).next('.video-holder').toggle('slow'); 
    /* 'this' contains the javascript object where the click occurred. 
     We wrap it in a jQuery object and then execute our functions on it */ 
});