Discussion :

[Rafapouf]

Bonjour,

je suis plutôt novice en Jquery, j'arrive à sélectionner des class et à leur donner quelque chose à faire ( ici cacher/montrer un lien et cacher/montrer du texte )

Seulement j'ai plusieurs liens et textes qui font la même chose. Je sais qu'on peut les selectionner en appelant la div au dessus et derriere chopper le selecteur cliqué via $this. Mais je n'y arrive pas, je pense que mon demarrage est mauvais.
Si quelqu'un pouvait m'aiguiller ce serait super !

Voila mon code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  $('.146texte').hide();$('.146lien').hide();$('.152texte').hide();$('.152lien').hide();  
 
$('a.146').click(function() {
    $('.146texte').slideToggle(400);
    $('.146lien').slideToggle(400);
	$('a.146').hide();
		return false;
  });
   $('.146lien').click(function() {
    $('.146texte').slideToggle(400);
		$('.146lien').hide();
		$('a.146').slideToggle(400);
		return false;
  });
 
    $('a.152').click(function() {
    $('.152texte').slideToggle(400);
    $('.152lien').slideToggle(400);
	$('a.152').hide();
		return false;
  });
   $('.152lien').click(function() {
    $('.152texte').slideToggle(400);
		$('.152lien').hide();
		$('a.152').slideToggle(400);
		return false;
  });

et mon html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="entry">'.$chaine1.'</div><div class="'.$id.'texte" style="display:none;"><p class="groupetexte">'.$chaine2.'</p></div>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="readmore"><a class="<?php echo $page->ID ;?>" name="lire" href="#" ><?php echo __('LIRE LA SUITE <span class="rouge"><b>+</b></span>');?></a><a class="<?php echo $page->ID ;?>lien" href="#" ><?php echo __('FERMER');?></a></span> <div class="clr"></div>

[marcha]

Salut,

Tu utilise JQuery comme un document.getElementById mais avec des classes.

Un des intérêts de JQuery c'est qu'il travail avec des listes.

Au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.146texte').hide();$('.146lien').hide();$('.152texte').hide();$('.152lien').hide();

Applique une classe à tous les éléments que tu veux cacher et écrit simplement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.cachable').hide();

$('.cachable') représente une liste d'éléments et $('.cachable').hide() appelle la fonction hide() pour chaqu'un d'entre eux.

Je te recommande de regarder quelques tutos d'introduction à JQuery.
Par exemple celui-ci

[Rafapouf]

Yes ! Merci pour le tuto !

Par contre pour l'utilisation des classes, je ne peux justement pas mettre une classe identique à tous ( du coup j'aurais pu travailler avec des id en fait ) parce que tout les élements sont sur la même page. Du coup si je cache ou decache la classe, chaque lien va se cacher/decacher alors qu'il faut que ce soit seulement celui cliqué !
C'est pour ça que je veux utiliser $(this)

[SpaceFrog]

sinon avec un selecteur multiple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.146texte, .146lien, .152texte, .152lien').hide();

[marcha]

Tu peux cumuler les classes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="146texte cachable" style="display:none;">
<div class="152texte cachable" style="display:none;">

[Rafapouf]

Oui je comprends ça, je sais que je peux cumuler les class.
Le problème reste le même !
La j'ai deux liens et deux textes à cacher. Du coup c'est faisable à la main en entrant chaque id de chaque texte, mais le jour ou j'en ai 100 ! je vais pas entrer les 100 à la main ! Et j'aimerais "automatiser" la chose, que chaque fois que je rajoute un texte, je n'ai pas à rajouter une ligne de Jquery.

[SpaceFrog]

si tu rationalise les id ou les class tu peux aussi avec des selecteurs du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("[id^='debutid']")

element dont l'id comence par debutid
a toi de nommer correctement

sinon un selecteur par filiation ou situation relative
bref ce en sont pas les possibilités de sélecteurs qui manquent en jquery

[marcha]

La j'ai deux liens et deux textes à cacher. Du coup c'est faisable à la main en entrant chaque id de chaque texte, mais le jour ou j'en ai 100 ! je vais pas entrer les 100 à la main ! Et j'aimerais "automatiser" la chose, que chaque fois que je rajoute un texte, je n'ai pas à rajouter une ligne de Jquery.

C'est exactement ce que tu trouves dans le tuto :-)

[Rafapouf]

Mouarf, malrgé le tuto je calle...
je n'arrive pas à cacher les liens sans tout cacher...

J'arrive à trouver les liens à cacher pas de prob' mais ça j'y arrivais déjà !
J'arrive à les afficher quand il faut, mais j'y arrivais déjà !
J'arrive par contre toujours pas à comprendre comment chopper l'élément courant cliqué et lui renvoyer sa class qui varie selon le lien cliqué

[marcha]

Dans la fonction click tu peux utiliser this pour obtenir l'élément cliqué.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var e = $(this);

Maintenant si tu veux agir sur un élément proche de ton lien il faut
utiliser des fonctions de selection de JQuery dans la catégorie traversing

Avec elles tu peux obtenir une référence sur l'élément suivant, l'élément parent, et ceci en filtrant également avec des sélecteur JQuery ususels.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var e = $(this);
var c = e.next('.cachable');
c.hide();

[SpaceFrog]

not()ou .(':not("selecteur"))permet d'exclure ...