Question

我有一个任务，其中我必须创建一个包含多张图片的网页，当您单击图片时，替换文字会显示在网页上。这种分配的一部分是避免在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;
}

请帮助！我是一个初学者，循环很难让我弄清楚。

Answer 1

有许多方法可以做到这一点，而不必为每个图片设置单独的处理程序。这是一种方法（我相信可以进一步完善以减少代码）：

您可以创建一个对象，该对象存储图片ID与关联文本ID之间的映射。像这样：

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/

有没有一种方法可以使用循环单击页面上的图像并使它们显示替代文本？的JavaScript

1 个答案: