Passage de querySelector à querySelectorAll

Version imprimable

Voir 40 message(s) de cette discussion en une page

24/07/2025, 09h42
Watilin
Bonjour,
je résume pour voir si j’ai bien compris :

:arrow: dans la boucle forEach, tu inscris un écouteur de click sur chacune des « grandes » images, pour afficher une popup. À chaque itération de cette boucle, ca_id a une valeur différente.

:arrow: Après la boucle, tu as besoin d’une valeur de ca_id en particulier, pour renseigner la variable idPreco (nous ne savons pas encore à quoi elle sert par la suite).

La ca_id qui t’intéresse est-elle :
- La première (correspondant à la première image dans la page) ?
- La dernière (valeur de la ca_id interne à la boucle lors de la dernière itération) ?
- Ou autre chose ?
Je te recommande d’essayer de renommer les variables internes à la boucle pour éviter le problème du masquage, et voir si des idées intéressantes peuvent ressortir de ça.

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
 
 
// Je commence par trouver le ca_id en dehors de la boucle.
 
const trouve_ca_id = document.querySelector('img.picture');
 
const idImg = trouve_ca_id.id.split ('X');
var ca_id = idImg[0]; // modif 1
 
// puis j'envoie la boucle avec ton code
 
const imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img');
imaxes.forEach(imax => {
const tist = imax.alt;
const idImg = imax.id.split('X');
if (idImg.length < 3) {return;}
ca_id = idImg[0]; // modif 2
const height = idImg[1];
const img_format = idImg[2];
 
imax.addEventListener('click', function() {PopGrand(ca_id, tist, height, img_format);});
});
 
// Et j'ai un ca_id propre pour les scripts suivants.
 
let idPreco = document.getElementById ('F'+ ca_id);

Deux modifs à faire

26/07/2025, 20h23
boteha

Bonjour,

Merci pour votre suivi.

Je pense avoir compris comment déclarer une variable globale en javascript, ce qui peut résoudre mon problème.

C'est le sens de la modif 2 de gabi7756.

Je reste étonné par la comportement de javascript par rapport à PHP.

Avec PHP la variable sortirait de la boucle sous sa dernière valeur sans avoir besoin de la déclarer comme globale.

Cela me semble plus sain car il est toujours dangereux de déclarer une variable globale.

Autrement, pour répondre aux questions de Watilin.

Citation:

Envoyé par Watilin

dans la boucle forEach, tu inscris un écouteur de click sur chacune des « grandes » images, pour afficher une popup. À chaque itération de cette boucle, ca_id a une valeur différente.

En fait je suis en train de changer la logique du carrousel.
Mes explications seraient un peu compliquées, je préfère attendre d'avoir fini la nouvelle version du script.

Citation:

Envoyé par Watilin

]Après la boucle, tu as besoin d’une valeur de ca_id en particulier, pour renseigner la variable idPreco (nous ne savons pas encore à quoi elle sert par la suite).

Idem...

Citation:

Envoyé par Watilin

La ca_id qui t’intéresse est-elle :

La première (correspondant à la première image dans la page) ?
La dernière (valeur de la ca_id interne à la boucle lors de la dernière itération) ?
Ou autre chose ?

Idem...

je reviens vers vous un peu plus tard...

Bonjour,
je rebondis sur le lien que tu as donné (pour les futurs lecteurs et lectrices, si jamais le lien est mort, il s’agit de la doc de var). Le mot-clé var est le plus ancien des moyens de déclarer une variable en JavaScript. Les autres sont let et const, apparus plus tard. Il y a une différence fondamentale : une déclaration let/const fait effet dans un bloc, c’est-à-dire le bloc d’une boucle for ou while ou autre, mais aussi le corps d’une fonction, en gros tout ce qui est entre accolades.
Code:

1 2 3 4 5 6 7 8 const a = 1; for (let i = 0; i < 10; i++) { const b = 2; // a, b et i sont accessibles ici } // ici seul a est accessible
var, quant à lui, ne se préoccupe que des fonctions, il se moque des « frontières » des boucles et autres blocs. Si tu as l’habitude de PHP, les variables déclarées avec var te seront plus familières.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const a = 1; const f = () => { // ceci est une fonction var v = 3; // a et v sont accessibles ici }; for (let i = 0; i < 10; i++) { var w = 4; // (*) // a, w et i sont accessibles ici } // ici, a et w sont accessibles, mais pas v
(Si tu fais tes propres tests, tu remarqueras peut-être que w est accessible avant sa déclaration, c’est une mécanique nommée hoisting (« hissage »), on ne va pas en parler maintenant.)

Une remarque à propos de la boucle forEach dans ton code : imax => { … } est une fonction, donc même avec var, une variable déclarée à l’intérieur de la boucle sera restreinte à la portée de la boucle. La solution la plus simple est celle que gabi7756 a donnée.
Si tu préfères éviter d’utiliser une fonction pour faire une boucle, alors la syntaxe for … of sera ton alliée.

Pour finir, si tu souhaites éviter d’utiliser une globale (et c’est compréhensible), tu peux créer une portée let/const « gratuite » en utilisant simplement des accolades :
Code:

1 2 3 4 { let z = 33; } // z n’est pas accessible ici

29/07/2025, 21h38
boteha

Bonjour Watilin,

Merci pour tes explications limpides.

Ces notions sont fondamentales mais généralement beaucoup plus mal expliquées, tu dissipes le brouillard dans ma tête.

Bonjour,

Je reviens après plusieurs semaine avec une nouvelle question.

Je rappelle qu'il s'agit d'ouvrir un carrousel d'images dans un pop-up en identifiant l'image cliquée.
L'image cliquée apparait comme image principale dans le pop-up.
A la fermeture du pop-up elle est l'image principale du carrousel de la page d'origine.

Ce code fonctionne.

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
36
37
38
39
40
41
const trouve_ca_id = document.querySelector('img.picture');
 
const idImg = trouve_ca_id.id.split ('X');
const ca_id = idImg[0];
const tist = trouve_ca_id.alt;
 
const focused = [];
 
const imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img'); // Renommé en imaxes pour plus de clarté
 
imaxes.forEach (imax => {
 
let idImg = imax.id.split('X');
if (idImg.length < 3) return;
let ca_id = idImg[0];
let height = idImg[1];
let img_format = idImg[2];
 
imax.addEventListener('mousedown', function () {
 
let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg;
PopGrand(ca_id, tist, height, img_format); 
});
 
imax.addEventListener('mouseup', function () {
 
document.querySelector('img[src="' + focused[0] + '"]').focus ();
 
});
 
})
 
 
function PopGrand(ca_id, tist, height, img_format) {
if (!mobile.matches) {return false;}
else
{
window.open ('popup.php?nom='+ encodeURI (ca_id+'G.'+img_format+'&tit='+tist), 'popImg', 'popup=yes,scrollbars=yes,resizable=yes,width=420,height='+height);
}
};

Quand il y a plusieurs carrousels il faut faire une boucle.

Dans une boucle...

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
let imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img'); 
 
imaxes.forEach (imax => {
 
let idImg = imax.id.split('X');
if (idImg.length < 3) return;
let ca_id = idImg[0];
let height = idImg[1];
let img_format = idImg[2];
 
imax.addEventListener ('mousedown', function()
{
let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg;
 
PopGrand (ca_id, tist, height, img_format)
});
 
imax.addEventListener('mouseup', function ()
{
document.querySelector('img[src="' + focused[0] + '"]').focus ();
});
 
 
});

Là l'identification de l'image qui a le focus bugue assez vite.

Je suppose que ce n'est pas clair du tout, ne pas hésiter à me demander des précisions...

04/09/2025, 11h35
melka one

bonjour

dans le cas de devoir gérer plusieurs carrousel le mieux est de transforme la fonction du carrousel en un objet afin de faire une instance pour chaque carrousel ca évite les mots de tete
04/09/2025, 20h39
boteha

Bonjour,

Citation:

Envoyé par melka one

dans le cas de devoir gérer plusieurs carrousel le mieux est de transforme la fonction du carrousel en un objet afin de faire une instance pour chaque carrousel ca évite les mots de tete

Excuse-moi mais je ne sais pas comment faire.
Peux-tu développer un chouïa ?
07/09/2025, 13h02
boteha

Bonjour,

Une première erreur porte sur cette ligne dans la fonction bind_event:

Code:

let imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img');

img.picture est à remplacer par :

Code:

img.picture[src^="im/pr/' + tab_ca_id[i] + 'G."]

Donc :

Code:

let imaxes = document.querySelectorAll('img.picture[src^="im/pr/' + tab_ca_id[i] + 'G."], img[src^="im/mu/' + ca_id + '-"] + img');

Là cela marche bien sauf que parfois l'image active est mal identifiée s'il s'agit de img.picture dans le carrousel.

Code:

let activeImg = document.activeElement.getAttribute('src');

Pas totalement fiable si img.picture...

Avez-vous une idée pour fiabiliser ?

Je rappelle que le problème n'existe que si plusieurs carrousels sur la même page.
Aucun souci avec un seul carrousel.

Plusieurs carrousels.
J'ouvre une popup par une image de Carrousel UN
Je ferme la popup
J'ouvre une popup par img.picture de Carrousel DEUX
Cela m'envoie vers carrousel UN comme si img.picture de Carrousel DEUX n'était pas active.

Si la deuxième popup est ouverte par une autre image que img.picture il n'y a pas de problème.
07/09/2025, 16h03
Toufik83

Bonjour,

Vous n'avez pas encore résolu le problème 8O ? montrez le code HTML des carrousels que vous voulez contrôler pour qu'on puisse les tester localement.

Ceci pourrait être résolu en utilisant le mot clé this ou bien event.target pour identifier le carrousel en question, vous n'écoutez pas ce qu'on vous propose...
09/09/2025, 19h02
Watilin

Bonsoir, je vois également un problème avec le focus.

Citation:

Envoyé par boteha

Là l'identification de l'image qui a le focus bugue assez vite.

Je pense que ça ne se comporte pas comme tu le crois, pour une raison précise : les images ne sont pas focusables (à moins d’utiliser tabindex, mais ce serait faire rentrer des carrés dans des cercles). Ajoute un console.log pour vérifier quel est le activeElement juste après l’appel à focus().

Si je comprends bien, l’information que tu cherches à retenir est : quelle image a été cliquée pour ouvrir la popup. Le plus simple est de garder cette information dans une variable de la portée supérieure. Pas besoin de document.activeElement, pas besoin de querySelector…

Voir 40 message(s) de cette discussion en une page