你好我有以下代碼，問題是當用forEach迭代時它會影響nodeList的所有元素3我怎么能影響它只生成對eventListener的呼叫？我需要當我將滑鼠懸停在其中一個專案上時，它只影響這個專案而不影響其他專案
const $projects = document.querySelectorAll(".projects__grid__element")
$projects.forEach( (project,index) => {
addEventListener('mouseover', (event) => {
// const $projectDescription= project.querySelector(project[index]);
// $projectDescription.style.display= "flex"
});
addEventListener('mouseout', (event) => {
// const $projectDescription= project.querySelector(".projects__grid__element__description");
// $projectDescription.style.display = "none"
});
})
我需要當我將滑鼠懸停在其中一個專案上時，它只影響這個專案而不影響其他專案
uj5u.com熱心網友回復：
您正在使用addEventListener，因此事件偵聽器附有window. 但是由于您希望將事件偵聽器附加到每個專案上，所以您應該使用project.addEventListener. 像這樣：
const $projects = document.querySelectorAll(".projects__grid__element")
$projects.forEach( (project,index) => {
project.addEventListener('mouseover', (event) => {
// const $projectDescription= project.querySelector(project[index]);
// $projectDescription.style.display= "flex"
});
project.addEventListener('mouseout', (event) => {
// const $projectDescription= project.querySelector(".projects__grid__element__description");
// $projectDescription.style.display = "none"
});
})
如果您將事件偵聽器附加到$projects元素的父級會更好，因此當您稍后洗掉或添加新專案元素時，事件偵聽器將起作用，無需額外作業。
uj5u.com熱心網友回復：
您正在將事件偵聽器添加到視窗本身而不是節點串列中的元素。
你可以試試：
forEach 回圈：
const $projects = document.querySelectorAll(".projects__grid__element");
Array.prototype.forEach.call($projects, function (project, index) {
project.addEventListener('mouseover', (event) => {
project.style.display= "flex"
});
project.addEventListener('mouseout', (event) => {
project.style.display = "none"
});
})
for回圈：
const $projects = document.querySelectorAll(".projects__grid__element");
for (let index = 0; index < $projects.length; index ) {
let project = $projects[index];
project.addEventListener('mouseover', (event) => {
project.style.display= "flex"
})
project.addEventListener('mouseout', (event) => {
project.style.display = "none"
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532015.html