11548 sujets

JavaScript, DOM et API Web HTML5

[Resolu] Toggle() sur plusieurs éléments ?

Bonjour,

J'ai une boucle qui génère une liste.


<img src="""...>
<div id="a" style="display: none"...></div>

<img src="""...>
<div id="b" style="display: none"...></div>

<img src="""...>
<div id="c" style="display: none"...></div>
...


Pour afficher les div qui sont masqués je fait :

$(document).ready(function(){
	$("img").click(function(){ 
		$("fieldset").toggle(); 
	});
});


Cela fonctionne très bien, par contre, chaque clic sur n'importe quelle image affiche/masque toutes les DIV.

Je voudrais simplement que chaque image correspond l'affichage d'une seul div

Comment s'y prendre ?

Merci d'avance de votre aide
Modifié par cvneo (09 Apr 2009 - 10:32)
Salut,

Il faut impérativement que tu te débrouilles pour que ta fonction de rappel (celle qui est dans le click()) puisse trouver la div correspondant à l'img cliquée.

Avec le peu de code HTML que tu as donné, $(this).next().toggle() suffira. Par contre, fais bien attention à ne jamais rien mettre entre l'image et la div...
Modifié par marcv (07 Apr 2009 - 09:18)
Pourquoi compliquer ? Retourne toggle('a') sur l'événement de chaque image.

Il va aussi de soi que JS désactivé l'intégralité des divs sera visible.
a écrit :
Retourne toggle('a') sur l'événement de chaque image.
Salut Arsene,
Je ne connais pas toggle('a'), qu'est-ce que c'est censé faire ? Veux-tu dire $('#a').toggle() ? (qui ouvrira tjs la même div)
Bonjour,

Merci pour vos réponses.

Du coup je vais faire un onclick sur les images qui passeront l'id de la div Smiley smile 


($i provient d'une boucle en PHP)
<img ... onclick="persoToggle(\'ladiv'.$i.'\')"/>
<div style="display: none" id="ladiv'.$i.'"....>
....
</div>


Ensuite la fonction :


<script language="javascript" type="text/javascript">
function persoToggle(ladiv){
	$("#'+ladiv+'").toggle();
}
</script>


Par contre comment passer le paramètre ladiv : $("#'+ladiv+'").toggle(); ???

Voila j'ai trouvé, tous simplement : $("#"+ladiv).toggle();


Merci de votre aide
Modifié par cvneo (07 Apr 2009 - 12:28)
<a href="javascript:toggle('a');" title="Afficher le texte"> renverra la valeur 'a' à la fonction :

function toggle(queldiv) {
document.getElementByID(queldiv).etc;
}

Ça dit juste à la fonction que l'événement toggle s'applique à un element appelé "a" (id="a"). Ainsi chaque lien-image ciblera son div (a, b, c...).
cvneo, la première solution sur laquelle tu étais parti, qui consistait à attacher un gestionnaire d'évènement au chargement du dom, était de loin préférable à la seconde (qui est d'ailleurs la même que propose Arsene).

1) Là, tu mélanges le code javascript avec le code HTML. C'est plus clair quand ils sont chacun de leur côté. Plus clair à la lecture, et à la maintenance. C'est comme pour les styles CSS, tu ne les mets pas directement dans le code HTML (<img style="tous mes styles">). Là, c'est pareil, tu gagnes en clarté si tu retires le code JS de tes balises.

2) de plus, la 2ème solution est plus lourde : ton code HTML contiendra autant de fois "onclick="persoToggle('blabla')" que tu as d'images sur la page. À comparer avec les 3 petites lignes de JS de ta première solution, pour la page entière, voire le site entier (!)

Ça te semblera peut-être pas énorme comme avantage (et je ne partagerais pas ton avis), mais vu que, pour couronner le tout, c'est plus facile à mettre en place, je vois vraiment pas pourquoi s'en priver.
Modifié par marcv (07 Apr 2009 - 16:28)
Je suis bien d'accord mais comment faire pour savoir que le clic sur tel ou tel image affiche ou masque tel ou tel div sans un id ou autre argument de liaison entre les deux ?

Car faire $(this).next().toggle() fonctionne bien, a condition à ne jamais rien mettre entre l'image et la div...

Ce qui est en fait le cas, il peux y avoir des choses entre les deux Smiley decu

J'ai simplifier via la solution 2, mais si une autre solution existe je veux bien la connaitre.
C'est dommage qu'il existe encore peux de tuto, plus avancer, avec Jquery, sur des choses courante de ce type d'action.

Encore merci
a écrit :
comment faire [...] sans un id ou autre argument de liaison entre les deux ?
L'argument de liaison, c'est précisément ce qu'il nous manque pour te donner une réponse précise. Tu as donné un code html très léger. La seule relation que l'on pouvait voir entre l'img et sa div, c'est que l'une est à la suite de l'autre... Si tu nous donnes un peu plus de code html (la totalité, idéalement), on trouvera certainement des relations plus intéressantes, et on pourra donc te donner une ligne jQuery efficace.
on je verrais un code HTML comme ça :


<h2><a href="#gal1"><img src="image.png" alt="galerie 1"/></a></h2>

<div id="gal1">...</div>


Au clic on récupère le href et on toggle le div Smiley cligne
Oui en fait l'id de liaison peut être spécifique a cet événement, dans ce cas il suffit de l'ajouter dans la ligne html, soit via un ID ou style ou autre ...

Par exemple :

<img id="img-1" src="""...>
<div id="div-1" class="div-1" style="display: none"...></div>
<br>
<img id="img-2" id="img-a" src="""...>
<div id="div-2" class="div-2" style="display: none"...></div>
<br>
<img id="img-3" src="""...>
<div id="div-3" class="div-3" style="display: none"...></div>


Donc vous dite que dans une tel configuration il est possible de lier l'action du clic sur l'image au DIV ?

Je pense que cette discutions va aider beaucoup d'autres personnes Smiley biggrin
Le code html que tu donnes est un code d'exemple, j'en déduis donc que tu n'as pas décidé de ta structure HTML et qu'on est assez libres sur ce point. La solution proposée par Patidou est très bonne :
[b]HTML[/b]
<a href="#idDiv" class="lienVersDiv">
    <img>
</a>
<div id="idDiv">blabla</div>

[b]JS[/b]
$(document).ready(function(){
    $('.lienVersDiv').click(function(){
        $($(this).attr('href')).toggle();
    });
});

Autre solution :

[b]HTML[/b]
<conteneur>
    <img class="classeDesImg">
    <div class="classeDesDiv">blabla</div>
</conteneur>

[b]JS[/b]
$(document).ready(function(){
    $('.classeDesImg').click(function(){
        $(this).siblings('.classeDesDiv').toggle();
    });
});
Ici le conteneur est un élement de type bloc (div, li, etc.)

Il y a plein d'autres solutions, toutes adaptables à ton code HTML (idéalement tu devrais déjà avoir ta structure HTML avant de t'attaquer au Javascript. Ça vient avant Smiley smile )
Modifié par marcv (08 Apr 2009 - 09:26)
Mille excuses, j'avais pas compris qu'il s'agissait de s'appuyer sur jQuery, ce n'est apparu que dans l'avant-dernier post Smiley smile Cela dit, question légereté, entre utiliser jQuery et écrire 1 commande JS par image qui renvoie à une fonction de 3 lignes je ne vois pas où est le gain ? Sur une fonction si simple, déployer l'artillerie lourde est-elle la meilleure solution ?
salut Arsene
a écrit :
question légereté, [...] déployer l'artillerie lourde est-elle la meilleure solution ?
L'utilisation de jQuery n'a pas été recommandée à cvneo, elle fait partie des éléments de sa question. Dès son premier post, il propose du code JS faisant appel à cette bibliothèque, on suppose donc qu'elle est déjà utilisée sur son site. Alors oui, si elle est là, autant s'en servir, ça allège le code (entre autres).

De plus, sans même parler de légèreté, la solution de 1 commande JS par image n'est pas idéale du point de vue séparation HTML/JS. Tant pour la clarté que pour la maintenance, c'est beaucoup mieux d'avoir le code JS à part (tout comme les CSS).
Modifié par marcv (08 Apr 2009 - 09:24)
100% d'acc, j'avais juste pas compris (ce qui était évident pout tout le monde) que la fonction toggle (qui décrit une action relativement standard de permutation et qu'on trouve dans d'autres API) était ici celle de jQuery.
Sujet clos
Aller à