javascript - 脚本仅适用于十分之一的 div

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作为选择器，它应该是唯一的。如果您想要预期的结果，请尝试使用类选择器。

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

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

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

Answer 2

使用.prev()and.next()以及 classes ( ids 必须是唯一的) 来达到预期的效果：

$('.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/