我无法更改 html 或 css 文件。我的任务是为我的缩略图设置一个单击处理程序，以放大元素内 img 中的图像。同时还将图中的无花果标题文本设置为拇指标题属性。我需要附加到div id = 缩略图。我的脚本没有放大我的缩略图或标题。
这就是我目前所拥有的。
<!DOCTYPE html>
<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">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</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>
你追求的是这样的东西吗？
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}img {
width: 100px;
height: 100px;
}<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>