Блог

Главная - Вопросы по программированию - Есть ли способ использовать цикл для щелчка изображений на странице и отображения альтернативного текста? JavaScript

Есть ли способ использовать цикл для щелчка изображений на странице и отображения альтернативного текста? JavaScript

#javascript #html #loops #addeventlistener

#javascript #HTML #циклы #addeventlistener

Вопрос:

У меня есть задание, в котором я должен создать веб-страницу с несколькими изображениями, и когда вы нажимаете на изображения, альтернативный текст отображается на веб-странице. Часть этого назначения заключается в том, чтобы избежать повторного использования аналогичного кода в JS и использовать addEventListener . Было высказано предположение, что можно использовать цикл, но я не совсем понимаю, как это сделать. Вот код, который у меня есть ниже. Повторяющиеся функции — это то, чего я хотел бы избежать, если это возможно. Я должен использовать чистый JS, без 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;
}

Пожалуйста, помогите! Я новичок, и мне было сложно разобраться в циклах.

Ответ №1:

Есть много способов сделать это без отдельного обработчика для каждого изображения. Вот один из способов (который, я уверен, может быть доработан еще больше, чтобы сократить код):

Вы можете создать объект, который хранит сопоставления между идентификатором изображения и идентификатором связанного текста. Вот так:

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

Затем выполните цикл по ним, чтобы добавить слушателя и передать слушателю соответствующее текстовое поле:

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

Вот все это (только для первых двух изображений) в качестве рабочего примера: https://jsfiddle.net/b1za980n/1 /