我没有找到问题所在，我尝试在单击“查看更多”按钮后弹出更大的图像，但我在检查器按钮中收到此消息错误。addEventListner 不是一个函数，我不明白出了什么问题。在这个例子中添加 const 是不正确的吗？因为我尝试使用 var 但没有任何效果。
1 回答
www说
TA贡献1775条经验 获得超8个赞
我发现问题在于addEventListener它不正确，并且缺少 img 标签。
现在试试这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
<section id="portfolio">
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random"
alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random"
alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="project">
<img class="project-image" src="https://source.unsplash.com/random" alt="">
<div class="grid-overlay">
<button class="viewbutton"> View more</button>
</div>
</div>
<div class="overlay">
<div class="overlay-inner">
<div class="close">Close X</div>
<img src="" style="width:100%;height:100%"/>
</div>
</div>
</section>
<script>
const buttons = document.querySelectorAll('.project');
const overlay = document.querySelector('.overlay');
const overlayImage = document.querySelector('.overlay-inner img');
function open(e){
overlay.classList.add('open');
const src = e.currentTarget.querySelector('img').src;
overlayImage.src=src;
}
function close(){
overlay.classList.remove('open');
}
buttons.forEach(button => button.addEventListener('click', open));
overlay.addEventListener('click', close);
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消