JQuery的問題.toggle功能

Question

HTML：

<div class="showcase"> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div> 

<div class="showcase" style="display: none;"> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div> 

<div class="showcase" style="display: none;"> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
     <a href="#"><img src="img/uploads/testchair.jpg" alt="" /></a> 
</div> 

的JavaScript：

$(document).ready(function() { 
    $('.click').click(function() { 
     $('.showcase').fadeOut('fast'); 
     $('.showcase').next('.showcase').show('fast'); 
    }); 
}); 

這是我的代碼怎麼現在唯一的問題是，當我按下DIV .. 。接下來的2個展櫃正在展出，我想只在下一個展示櫃的時候再點擊下一個櫃檯展示櫃，我該怎麼做？ :)

Answer 1

我認爲你的問題是$('.showcase')選擇器適用於頁面上的所有'展示''div'元素。你有可能計算出在$('.click').click函數中哪個'div'被點擊了嗎？

Answer 2

$(".showcase")選擇類別爲showcase的所有元素。從你的代碼中很難準確地知道你想要什麼，但是這裏有一些代碼會隱藏第一個可見的.showcase並顯示下一個代碼。

$(document).ready(function() { 
    $('.click').click(function() { 
    $('.showcase:visible').eq(0).fadeOut('fast').next('.showcase').show('fast'); 
    }); 
}); 

參考文獻：
:visible
eq() - 或.first() - 或.filter(":first")

但是，如果所有的.showcases是看不見你想只顯示第一個。所以整個代碼：

$(document).ready(function() { 
    $('.click').click(function() { 
    if ($('.showcase:visible').length > 0) 
    $('.showcase:visible').eq(0).fadeOut('fast').next('.showcase').show('fast'); 
    else 
    $('.showcase').eq(0).show('fast'); 
    }); 
}); 

Working example

最後，你也許可以clean it up to：

$(function() { 
    $('.click').click(function() { 
     var $visible = $('.showcase:visible'), 
      $showcase = $('.showcase'); 
     if ($visible.length > 0) 
      $visible.fadeOut('fast').next('.showcase').show('fast'); 
     else 
      $showcase.eq(0).show('fast'); 
    }); 
}); 

Answer 3

的，$（ '點擊'）是行不通的，因爲第一該類中沒有HTML元素。我想這是你所需要的：

$(document).ready(function() { 
    $('.showcase').click(function() { 
     $(this).fadeOut('fast'); 
     $(this).next('.showcase').show('fast'); 
    }); 
}); 

Answer 4

在這裏你去：http://jsfiddle.net/MDEE2/1/

基本上，我添加了一個變量來跟蹤當前正在觀看的陳列櫃，然後我就拿着下一個之一，並使其彈出。

$(document).ready(function() { 
    $('.click').click(function() { 
     var active_show = $('.showcase:visible'); 
     active_show.fadeOut('fast'); 
     active_show.next('.showcase').show('fast'); 
    }); 
});