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个展示柜出现了我想要再次点击下一个展示区域时再展示下一个陈列柜div，怎么能我这样做？：）

Answer 1

在这里：http://jsfiddle.net/MDEE2/1/

基本上，我添加了一个变量来跟踪当前正在查看的哪个陈列柜，然后我只使用 next 一个并弹出它。

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

Answer 2

我认为您的问题是$('.showcase')选择器正在应用于页面上的所有'showcase''div'元素。你有可能找出在$('.click').click函数中点击了哪个'div'吗？

Answer 3

$(".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'); }); });。所以整个代码是：

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

Working example

最后，你可能clean it up to：

{{1}}

Answer 4

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

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

使用.toggle函数的JQuery问题

4 个答案: