如何通过getElementsByClass循环进行图像扩展

Question

for循环无法扩展图像。

当我将索引放在末尾时，它就能工作了。所以我间接地知道HTML和CSS没有什么问题，而且这个函数可以工作。

const expandImage = document.getElementsByClassName('website_image')[0];

expandImage.addEventListener('mouseover', expand);

function expand(event){
  expandImage.style.padding='11%';
}

但是，当我尝试执行for循环时：

const expandImage = document.getElementsByClassName('website_image');

for(let i=0; i<expandImage.length; i++) {

expandImage.addEventListener('mouseover', expand);

function expand(event){
  expandImage.style.padding='11%';
}
}

什么都没发生。

我做错了什么？

Answer 1

您不是在循环中引用数组元素，而是引用整个数组。您需要在循环中使用等效的[0]，在本例中是[i]。

const expandImage = document.getElementsByClassName('website_image');

for(let i=0; i<expandImage.length; i++) {

expandImage[i].addEventListener('mouseover', expand);

function expand(event){
  expandImage[i].style.padding='11%';
}
}

但你会发现这也行不通！不能在函数中访问expandImage[i]，因为在函数执行时，i等于expandImage.length。您需要在expandImage当前元素的声明范围中存储一个引用，或者在您的方法中只使用this对象可能更简单：

const expandImage = document.getElementsByClassName('website_image');

for(let i=0; i<expandImage.length; i++) {

expandImage[i].addEventListener('mouseover', expand);

function expand(event){
  this.style.padding='11%';
}
}

Answer 2

使用expandImage[i]而不是expandImage