Discussion :

[Xorellion]

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 html :

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
<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 :

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

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');
    });
}

[-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 :

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

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

[javatwister]

Oui!

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

Code javascript :

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

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

[melka one]

jour

Code :

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

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 :

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

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