Question

我有一个脚本让我的div淡出并淡入另一个div。代码可以工作，但我有10个div我想让它工作，现在它只适用于第一个div的顺序。

$('#content').click(function(e){    
$('#content').fadeOut('slow', function(){
    $('#backside').fadeIn('slow');
});
});

$('#backside').click(function(e){    
$('#backside').fadeOut('slow', function(){
    $(' #content').fadeIn('slow');
});
});

http://jsfiddle.net/3XwZv/981/

Answer 1

这是因为您使用 id 作为选择器，它应该是唯一的。如果您需要预期的结果，请尝试使用 class 选择器。

$('.content').click(function(e){    
$(this).fadeOut('slow', function(){
    $(this).next('.backside').fadeIn('slow');
});
});

更改标记以在各自的元素上设置这些类（内容和背面）。

<div class="content"></div>

Answer 2

使用.prev()和.next()以及类（id必须唯一）才能达到预期的效果：

$('.content').click(function (e) {
   $(this).fadeOut('slow', function () {
        $(this).next().fadeIn('slow');
    });
});

$('.backside').click(function (e) {
   $(this).fadeOut('slow', function () {
        $(this).prev().fadeIn('slow');
    });
});

这里有效：http://jsfiddle.net/3XwZv/983/

脚本只适用于十分之一的div

2 个答案: