Bonjour,

Comment afficher les images d'une section de bloc-modale, afin que l'image sur laquelle on clique s'affiche?

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
 <!-- Section equipement -->
 
    <h2 class="titre-equipements">Les équipements</h2>
        <section id="equipement">
            <button type="button" data-index="1" class="btn-modale"></button>
            <button type="button" data-index="2" class="btn-modale"></button>
            <button type="button" data-index="3" class="btn-modale"></button>
            <button type="button" data-index="4" class="btn-modale"></button>
            <button type="button" data-index="5" class="btn-modale"></button>
            <button type="button" data-index="6" class="btn-modale"></button>
            <button type="button" data-index="7" class="btn-modale"></button>
            <button type="button" data-index="8" class="btn-modale"></button>
            <button type="button" data-index="9" class="btn-modale"></button>
 
        </section>
        <div class="bloc-modale">
         <div class="bloc-img">
           <img src="ressources/img9-equip.jpg" alt="matériel de sport"> 
             <button class="fermeture-modale">X</button>
            </div>
        </div>
 
      <script src="app.js"></script>
    </body>
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const btns = document.querySelectorAll('.btn-modale');
const modaleEquipement = document.querySelector('.bloc-modale');
const fermetureModale = document.querySelector('.fermeture-modale');
const imgIndex = document.querySelector('.bloc-modale img');
 
btns.forEach(btn => {
    document.querySelector('#show-modale')
    btn.addEventListener('click', (e) => {
 
        imgIndex.src = `ressources/img${e.target.getAttribute('data-index')}-equip.jpg`;
        modaleEquipement.classList.add('active-modale');
 
    });
 
});