Jquery reliant le bouton à un contenu spécifique

Question

J'ai un concept similaire à celui d'un accordéon. J'ai un bouton, lorsqu'il est cliqué, il glisse vers le bas d'un div avec un ID spécifique. J'en ai environ 3 sur la page. Comment est-ce que j'écris une fonction qui choisit automatiquement la div correcte pour glisser vers le bas?

J'ai vu des plugins utiliser l'attribut rel pour y parvenir. Dans le code Jquery, comment j'accomplirais cela?

Code Ex:

<a rel="#c1">slide 1</a> 
<a rel="#c2">slide 2</a> 
<div id="c1"></div> 
<div id="c2"></div> 

Answer 1

Vous pouvez faire quelque chose comme

$("a").click(function() { 
    var divSelector = $(this).attr("rel"); 
    $(divSelector).slideDown(); 
}); 

Si vous souhaitez obtenir un peu plus de fantaisie, vous pouvez grouper vos objets ensemble (ou leur donner une classe) et faire quelque chose comme ce qui suit afin que les autres conteneurs glissent.

<div id="sliders"> 
    <a rel="#c1">slide 1</a> 
    <a rel="#c2">slide 2</a> 
</div> 
<div id="slidees"> 
    <div id="c1"></div> 
    <div id="c2"></div> 
</div> 

$("#sliders a").click(function() { 
    var divSelector = $(this).attr("rel"); 
    $("#slidees div").not(divSelector).slideUp(); 
    $(divSelector).slideDown(); 
}); 

Answer 2

Shawn

classe d'emploi pour divs, de sorte que vous pouvez faire quelque chose comme ça

$('.other').click(function() { 

}); 

le code ci-dessus sera appliqué à tous les éléments avec le même nom de classe.

Answer 3

$('a').click(function() { 
    var target = $(this).attr('rel'); 
    $(target).toggle(); 
});