J'ai un devoir où je dois créer une page Web avec plusieurs images et lorsque vous cliquez sur les images, le texte alternatif s'affiche sur la page Web. Une partie de cette tâche consiste à éviter d'utiliser un code similaire à plusieurs reprises dans JS et à utiliser addEventListener. Il a été suggéré qu'une boucle peut être utilisée mais je ne comprends pas très bien comment. Voici le code que j'ai ci-dessous. Les fonctions de répétition sont ce que je voudrais éviter si possible. Je dois utiliser du JS pur, pas de JQuery.

HTML:

<html>

<head>
    <meta charset="utf-8" />
    <title>Alternate Text Viewer</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
    <h1> PICTURES OF CATS </h1>

    <img id="catPic1" src="cougar.jpg" alt="Cougar (Puma concolor), Santa Monica Mountains National Recreation Area, 2015." />
    <div class="hidden" id="message1">Cougar (Puma concolor), Santa Monica Mountains National Recreation Area, 2015.</div>

    <img id="catPic2" src="domestic-cat.jpg" alt="Two white cats pose for the camera at the Jimmy Carter Boyhood Farm." />
    <div class="hidden" id="message2">Two white cats pose for the camera at the Jimmy Carter Boyhood Farm.</div>

    <img id="catPic3" src="farm-cat.jpg" alt="A farm cat with goats, Carl Sandburg Home National Historic Site, 2016." />
    <div class="hidden" id="message3">A farm cat with goats, Carl Sandburg Home National Historic Site, 2016.</div>

    <img id="catPic4" src="lynx.jpg" alt="A large wild cat with black tufts of fur on its ears." />
    <div class="hidden" id="message4">A large wild cat with black tufts of fur on its ears.</div>

    <img id="catPic5" src="mountain-lion.jpg" alt="A mountain lion walks in snow." />

    <div class="hidden" id="message5">A mountain lion walks in snow.</div>

    <script src="text-viewer.js"></script>

</body>
</html>

JS

'use strict';

function clickHandler() {
    let textBox = document.getElementById('message1');
    if (textBox.className === 'hidden') {
        textBox.className = '';
    } else {
        textBox.className = 'hidden';
    }
}
let element1 = document.getElementById('catPic1');
element1.addEventListener('click', clickHandler); 

function clickHandler2() {
    let textBox = document.getElementById('message2');
    if (textBox.className === 'hidden') {
        textBox.className = '';
    } else {
        textBox.className = 'hidden';
    }
}
let element2 = document.getElementById('catPic2');
element2.addEventListener('click', clickHandler2); 

function clickHandler3() {
    let textBox = document.getElementById('message3');
    if (textBox.className === 'hidden') {
        textBox.className = '';
    } else {
        textBox.className = 'hidden';
    }
}
let element3 = document.getElementById('catPic3');
element3.addEventListener('click', clickHandler3);

function clickHandler4() {
    let textBox = document.getElementById('message4');
    if (textBox.className === 'hidden') {
        textBox.className = '';
    } else {
        textBox.className = 'hidden';
    }
}
let element4 = document.getElementById('catPic4');
element4.addEventListener('click', clickHandler4);

function clickHandler5() {
    let textBox = document.getElementById('message5');
    if (textBox.className === 'hidden') {
        textBox.className = '';
    } else {
        textBox.className = 'hidden';
    }
}
let element5 = document.getElementById('catPic5');
element5.addEventListener('click', clickHandler5); 

CSS

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: beige;
    font-size: 18px;
}

h1 {
    font-style: inherit;
    color: darksalmon;
    text-align: center;
    font-size: xx-large;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 500px;
    padding: 5%;
    
}

#message1, #message2, #message3, #message3, #message4, #message5 {
    width: 500px;
    height: 50px;
    background-color: lightsalmon;
    margin-left: auto;
    margin-right: auto;
}

.hidden {
    display: none;
}

S'il vous plaît, aidez-vous ! Je suis un débutant et les boucles ont été difficiles pour moi à comprendre.

0
dingerina 9 nov. 2020 à 01:29

1 réponse

Meilleure réponse

Il existe de nombreuses façons de le faire sans avoir un gestionnaire distinct pour chaque image. Voici un moyen (qui, j'en suis sûr, peut être encore affiné pour réduire le code):

Vous pouvez créer un objet qui stocke les correspondances entre l'identifiant de l'image et l'identifiant du texte associé. Comme ça:

let pairs = {
    "catPic1": "message1",
    "catPic2": "message2",
    // more ...
}

Ensuite, passez-les en boucle pour ajouter l'auditeur et passez la zone de texte correspondante à l'auditeur :

for (let pictureId of Object.keys(pairs)) {
  let picture = document.getElementById(pictureId);
  let textBox = document.getElementById(pairs[pictureId])
  picture.addEventListener('click', () => {
    clickHandler(textBox);
  });
}

Voici le tout (pour les deux premières images uniquement) comme exemple de travail : https://jsfiddle.net/ b1za980n/1/

1
Aziz Sonawalla 8 nov. 2020 à 22:42