Affecter un événement dans une boucle

Version imprimable

Bonsoir,

Je rencontre un problème, j'aimerais qu'un click sur la div img-to-hover active la classe 'active' sur la div img-hover.
Je partage mes deux tests javascript qui ne fonctionne pas mais qui d'après moi revient à faire la même chose.

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
<div class="row">
    <div class="col-7 relative hidden">
        <img class="img-to-hover" src="img/oil_station.jpg" alt="">
        <div class="img-hover">
            <div class="img-hover-box">
                <div class="img-hover-content">
                    <span class="img-hover-title">Ceci est un message à caractère informatif.</span><br><br>
                    <span class="img-hover-description">Ceci est un message à caractère informatif.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-3 relative hidden">
        <img class="img-to-hover" src="img/oil_station2.jpg" alt="">
        <div class="img-hover">
            <div class="img-hover-box">
                <div class="img-hover-content">
                    <span class="img-hover-title">Ceci est un message à caractère informatif.</span><br><br>
                    <span class="img-hover-description">Ceci est un message à caractère informatif.</span>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

Code:

1
2
3
4
5
6
7
8
const img = document.querySelectorAll(".img-to-hover");
const hover = document.querySelectorAll('.img-hover');
 
for (i = 0; i<img.length; i++) {
    img[i].addEventListener('click', () => {
        hover[i].classList.toggle('active');
    });
}

20/11/2020, 08h30
-Nikopol-
Bonjour,
la variable i n'est pas définie dans le scope du listener. Une des façon de faire et de récupérer currentTarget et dans ton cas l'élement adjacent, là tu pourras lui ajouter la classe active
Code:

1 2 3 4 5 for (let i = 0; i<img.length; i++) { img[i].addEventListener('click', (e) => { console.log(e.currentTarget.nextElementSibling) }); }

Oui!

Et pendant que tu es, tu peux te débarrasser des variables:
Code:

1 2 3 document.querySelectorAll(".img-to-hover").forEach(v => { v.addEventListener("click",() => v.nextElementSibling.classList.toggle('active')) })

20/11/2020, 18h14
melka one

jour

Code:

for (i = 0; i<img.length; i++) {

j'ose espérer que tu declare la variable i car en faisant de cette façon tu créé une variable globale, utilise une variable let

Code:

for (let i = 0; i<img.length; i++)