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'); 
    }); 
});