Fonction jQuery pour vérifier les classes entre deux divs?

Question

J'ai une page avec deux ensembles de div comme si

<div id="set1"> 
<div class="1"></div> 
<div class="2"></div> 
<div class="3"></div> 
..... 
<div class="n"></div> 
</div> 

<div id="set2"> 
<div class="1"></div> 
<div class="2"></div> 
<div class="3"></div> 
..... 
<div class="n"></div> 
</div> 

« set2 » est cachée à la page charge mais chaque div doit apparaître lorsque la div correspondante dans « set1 » est cliqué. Par exemple, lorsque "div # set1.1" est cliqué, "div # set2.1" apparaîtra. Comment puis-je faire cela avec jQuery?

Merci

Answer 1

Cela devrait fonctionner:

var set2 = $('#set2'); 

$('#set1 > div').click(function(){ 
    set2.find('.' + this.className).show(); 
}); 

Nous avons d'abord le cache #set2 pour des raisons de performances, puis fixez un gestionnaire d'événements de clic à chacun de l'enfant div de #set1, qui lorsque vous cliquez dessus, provoquera la même la div correspondant classer dans #set2 pour apparaître. Voir http://www.jsfiddle.net/yijiang/xCEVH/1/ pour une démo simple. Toutefois, les noms de classe commençant par des nombres ne sont pas valides en HTML. J'ai pris la liberté de corriger cette erreur dans la démo.

Answer 2

$('#set1 .1').click(function(event){ 
    $('#set2 .1').show(); 
}) 

Cela ajouterait la fonction. Répétez cela pour les autres divs ou utilisez les boucles for-to pour automatiser cela.

Answer 3

Si div parent est caché, vous ne pourrez pas en afficher si ses enfants. Avec jQuery, vous pouvez faire quelque chose comme this:

cacher tous les enfants de set2

#set2 div{ 
    display:none; 
} 

et puis quand vous cliquez sur l'article - afficher tous les éléments de cette catégorie.

$("#set1 div").click(function(){ 
    $('.'+ this.className).show(); 
}); 

Answer 4

$('#set1').bind('click',function() { 

    $('#2.'+$(this).attr('id').substring(2)).show(); 

    });