Question

我正在做一项要求我的任务：

“为每个缩略图图像添加一个点击事件处理程序。当点击较小的图像时，您的代码将在元素内的元素中显示图像的较大版本。同样的偶数处理程序也会将文本设置为单击缩略图图像的标题属性。您的事件处理程序必须使用偶数委派。“

以下是提供的代码：

<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>

我被困住了。如何添加一个单独的事件处理程序，为每个缩略图显示不同的较大图像？

如何将单击事件处理程序添加到单个img元素？

0 个答案: