Conditions et évènements

Bonjour,
je reviens vers vous pour une autre question:) qui n'est pas évidente à expliquer..., j'ai trois images dans une page web, quand je clique sur une image elle doit apparaitre en grand dans une pop-In, je dois faire cela en jQuery.
J'ai réussi, mais je trouve que mon code est trop répétitif. Dans ma formation on a pas vu les les fonctions ou sous-programme. J'ai fait quelques recherche sur internet, j'ai quelques idée mais je n'arrive pas à mettre en pratique.

J'ai voulu créer une seul pop-In(div) et éviter d'en faire trois, puis quand je clique sur une des images j'attribue du css le src et show()

Mon code est le suivant :

Code:

---

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 28 29 30 31 32 33 34 35

$("#imgOnglet1").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg}); $("#popInImg img").attr("src", "img/onglet1.jpg"); });   $("#hide1").click(function(){ $("#popInImg").hide(); });   $("#imgOnglet2").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg}); $("#popInImg img").attr("src", "img/onglet2.jpg"); });         $("#imgOnglet3").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg}); $("#popInImg img").attr("src", "img/onglet3.jpg"); });     $("#imgOnglet4").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg}); $("#popInImg img").attr("src", "img/onglet4.jpg"); });

---

Tout est répétitif sauf attr()

Est t'il possible de mettre des conditions selon l'image que je clique et appliquer le src correspondant :

Code:

---

1 2 3 4 5 6 7 8 9 10

$("#imgOnglet1, #imgOnglet2, #imgOnglet3,#imgOnglet4 ").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});   if("#popInImg img").click ...... $("#popInImg img").attr("src", "img/onglet1.jpg"); } else if ("#popInImg img").click ......{ $("#popInImg img").attr("src", "img/onglet2.jpg"); });

---

Je connais un peu les conditions pour comparer des variables mais les évènements un peu plus compliqué pour moi.
Je pourrais laisser le code que j'ai fait mais j'aimerais optimiser et apprendre un peu plus.
merci pour votre aide.

Bonjour,
la documentation est très souvent un bon recours : jQuery.on().

Code:

---

1 2 3

$("liste des éléments").on("click", function(){ console.log($(this).attr("la valeur que tu recherches")); });

---

bonsoir,
merci pour votre réponse, oui j'essaie de regarder un peu les documentation mais parfois c'est un peu compliqué
Donc si je comprend bien votre réponse avec ce code j'applique aux trois éléments le css fadeIn et css (qui est en commun aux trois)

Code:

---

1 2 3 4

$("#imgOnglet1, #imgOnglet2, #imgOnglet3,#imgOnglet4 ").click(function(){ $("#popInImg img").css({"width" :"700px"}); $("#popInImg").fadeIn(1000); $("#popInImg").css({"left" : popLargeurImg, "top": popHauteurImg});

---

});

et pour changer l'image dans la pop-in selon si je clique sur l'image1 deux ou trois :

Code:

---

1 2 3 4 5 6 7 8

$("#imgOnglet1").on("click", function(){ console.log($(this).attr("src", "img1.jpg")); });   $("#imgOnglet2").on("click", function(){ console.log($(this).attr("src", "img2.jpg"));   etc.

---

Merci pour votre aide et surtout votre patience.

Pas tout à fait, il te faut « structurer » ton raisonnement ;)

A partir du HTML suivant :

Code:

---

1 2 3 4 5 6 7 8

<img src="images/image-1.png" class="pop-in-img" alt=""> <img src="images/image-2.png" class="pop-in-img" alt=""> <img src="images/image-3.png" class="pop-in-img" alt=""> <!-- etc --> <!-- la pop-in masquée --> <div id="pop-in-div"> <img alt=""> </div>

---

... j'ai mis une classe commune sur les images pour alléger le sélecteur.

Ensuite, il te suffit de faire :

Code:

---

1 2 3 4 5 6 7 8

$(".pop-in-img").on("click", function(){ // récupération, l'élément jQuery cliqué est $(this) const src = $(this).attr("src"); // affectation src à l'image $("#pop-in-div img").attr("src", src); // affichage de la pop-in $("#pop-in-div").fadeIn(1000); });

---

rien de plus si ce n'est adapter à ton besoin

Ah d’accord je n’avais pas de tout pensé à récupérer dans une variable l’ image cliquée puis la manipuler.. Je vais agrandir l’image dans la pop-in en lui affectant aussi le css.
Merci pour votre aide.
Bonne soirée