11484 sujets

JavaScript, DOM et API Web HTML5

Selection d'un element jquery lors d'un click.

Bonjour,
Je test le jquery mais il y a un truc que je ne comprends pas, c'est la selection precise d'un element parmi d'autre. Lorsque je cible un de ces elements il applique l'action sur tous les elements similaires et pas seulement sur celui sur lequel j'ai cliqué.
Pour y arriver jusque là j'utilisais les ids specifiques à chacun des elements pour etre sûr d'appliquer l'action au bon cliqué mais bon il doit y avoir une technique plus "propre" que celle de cibler les ids pour effectuer ceci.

Exemple pour un slidetoggle:

<ul class="toggle">
<li>
          <div class="lien">z</div>
          <p>text à afficher/cacher</p>
</li>
<li>
           <div class="lien">z</div>
           <p>text à afficher/cacher</p>
</li>
</ul>


$(function() {
$("ul.toggle li .lien").click(function() {
var parent = $(this).parent().parent().attr('class');//recupere le toggle cliqué contenant le lien
parent.children('p').slideToggle( "slow" ); //Redescant dans la hierarchie pour ciblé le p et le cacher
	
});


L'interêt etant de ne faire l'action que sur celui qui est cliqué.
Modifié par kuatsu (22 Jul 2014 - 14:27)
Ok, c'est bon j'ai trouvé, en fait en faisant comme ça cela fonctionne:

$("ul.toggle li a.lien").click(function() {
	 var $this= $(this);
	 var parent = $this.parent("li");//cible parent
	 parent.children('p').slideToggle( "slow" );	
});

Il doit y avoir bien mieux mais bon... , au moins je ne cible plus les ids...

Merci bien.

Guillaume.
Modifié par kuatsu (22 Jul 2014 - 14:27)
Bonjour et bienvenue Smiley smile

Vu ton exemple, on peut d'ailleurs simplifier le tout par :
$('.lien').click(function() {
    $(this).siblings('p').slideToggle(600);	
});

> simplification du sélecteur
> j'enlève les stockages en variables
> plutôt que 'slow', je préfère directement utiliser sa valeur en millisecondes, pour éventuelles modifs ultérieures
> siblings() sur la doc jQuery

Ps : pense à utiliser les options de coloration syntaxique du forum pour mieux présenter ton code Smiley cligne
Modifié par audrasjb (22 Jul 2014 - 12:32)
Bonjour et mille merci! Smiley smile ce que vous êtes forts! ^ ^.
Merci infiniment de vos infos! Smiley smile

Mea culpa pour la coloration syntaxique...c'est modifié merci bien Smiley smile
Modifié par kuatsu (22 Jul 2014 - 14:27)
Sujet clos
Aller à