Script ne fonctionnant que pour un seul sur dix

Question

J'ai un script qui fait disparaître mon div et se fondre dans un autre div. Le code fonctionne mais j'ai 10 divs pour lesquels je veux travailler et pour l'instant cela ne fonctionne que pour la première div dans l'ordre.

$('#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

Utilisez .prev() et .next() ainsi que des cours (id s doivent être uniques) pour obtenir l'effet désiré:

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

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

Ici, il travaille: http://jsfiddle.net/3XwZv/983/

Answer 2

Ceci est parce que vous avez utilisé id comme un sélecteur qui doit être unique. Essayez avec le class si vous voulez obtenir le résultat attendu.

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

Et changer le balisage pour définir ces classes (contenu & backside) sur leurs éléments respectifs.

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