javascrip的弹出画廊效果问题
我没有找到问题所在，我尝试在单击“查看更多”按钮后弹出更大的图像，但我在检查器按钮中收到此消息错误。addEventListner 不是一个函数，我不明白出了什么问题。
在这个例子中添加 const 是不正确的吗？因为我尝试使用 var 但没有任何效果。
海绵宝宝撒浏览 93回答 1
1回答
-
www说
我发现问题在于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>
随时随地看视频慕课网APP
相关分类
JavaScript