所以我是网页设计的新手，在让我的点击事件处理程序正常工作时遇到了问题。我无法更改 html 或 css 文件。我的任务是为我的缩略图设置一个点击处理程序，以放大 <figure> 中 img 中的图像。元素。同时还将图中的 figcaption 文本设置为 thumbs title 属性。我需要附加到 div id = 缩略图。我的脚本没有放大我的缩略图或标题。
这是我创建的 HTML 文档:
<!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">
</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>
Js脚本:
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function (e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var img = document.getElementById("figcaption");
img.addEventListener("mouseover",function (event) {
img.className = "featured figcaption";
});
img.addEventListener("mouseout", function (event) {
img.className = "featured figcaption";
var element = document.getElementById('figcaption');
element.style.opacity = "0.9";
element.style.filter = 'alpha(opacity=0%)';
});
感谢您的任何建议，希望我可以为其他人付出代价!
最佳答案
我认为这会导致您遇到问题。 JS是getElementById，但是没有ID是call figcaption。
var img = document.getElementById("figcaption");
关于JavaScript 事件处理程序单击缩略图以放大图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49224653/