首頁猿問 javascrip的彈出畫廊效果問題

javascrip的彈出畫廊效果問題

JavaScript

海綿寶寶撒 2023-07-14 16:43:52

我沒有找到問題所在，我嘗試在單擊“查看更多”按鈕后彈出更大的圖像，但我在檢查器按鈕中收到此消息錯誤。addEventListner 不是一個函數，我不明白出了什么問題。在這個例子中添加 const 是不正確的嗎？因為我嘗試使用 var 但沒有任何效果。

查看完整描述

1 回答

www說

TA貢獻1775條經驗獲得超8個贊

我發現問題在于addEventListener它不正確，并且缺少 img 標簽。

現在試試這個：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<img class="project-image" src="https://source.unsplash.com/random"

alt="">

</div>

</div>

<img class="project-image" src="https://source.unsplash.com/random"

alt="">

</div>

</div>

</div>

</div>

</div>

</div>

<div class="close">Close X</div>

</div>

</section>

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>

反對回復 2023-07-14

1 回答
0 關注
116 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

javascrip的彈出畫廊效果問題

javascrip的彈出畫廊效果問題

1 回答

添加回答