带有.toggle函数的JQuery问题

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>

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

---

这就是我的代码现在唯一的问题是当我按下div。。。接下来的2个展示柜将显示我只想显示下一个showcase en再次单击下一个showcase div时，我如何才能做到这一点？：）

我认为您的问题在于，

$（'.showcase'）

选择器正在应用于页面上的所有“showcase”“div”元素。您是否可以计算出在

$（'.click'）中单击了哪个“div”。单击
函数
 
$（“.showcase”）
选择具有类
showcase
的所有元素。从您的代码中很难准确地说出您想要什么，但是下面的一些代码将隐藏第一个可见的
.showcase
，并显示下一个

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

参考文献：



-或-或

但是，如果所有的
.showcase
都不可见，则只需显示第一个。因此，整个代码是：

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


最后，你可以：

首先，$（'.click'）不起作用，因为HTML中没有该类的元素。我想这就是你需要的：

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

给你：

基本上，我添加了一个变量来跟踪当前正在观看的展示中的哪些，然后我只是选择了下一个并使其弹出

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

带有
class='click'
的元素在哪里？
$(document).ready(function() {
    $('.click').click(function() {
        var active_show = $('.showcase:visible');
        active_show.fadeOut('fast');
        active_show.next('.showcase').show('fast');
    });
});