Я работаю над заданием, которое просит меня:
"Добавьте обработчик события щелчка к каждому уменьшенному изображению. Когда щелкнет меньшее изображение, ваш код покажет увеличенную версию изображения в элементе внутри элемента. Этот же четный обработчик также установит текст для щелкнул атрибут заголовка миниатюрного изображения. Ваш обработчик событий должен использовать четное делегирование. "
Вот предоставленный код:
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js"> </script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
Я застрял. Как добавить один обработчик событий, который показывает разные большие изображения для каждого отдельного эскиза?