如何用getElementsByClassName循环实现图片展开？循环失效问题排查

你的循环代码有三个关键错误：

错误1：绑定事件的对象搞错了 #

document.getElementsByClassName返回的是HTMLCollection类数组对象，你在循环里直接给整个expandImage集合绑定mouseover事件，这完全不对——应该给集合里的单个元素（也就是expandImage[i]）绑定事件。

错误2：修改样式的对象搞错了 #

expand函数里的expandImage.style操作的还是整个集合，不是当前鼠标悬停的那个图片元素。你需要用this（事件绑定的元素本身）或者event.target来指向触发事件的具体元素。

错误3：函数定义位置不合理 #

把expand函数放在循环内部，会导致每次循环都重新定义一次函数，虽然用let不会有变量提升的问题，但完全没必要，还容易造成混淆。

修复后的代码 #

方式一：使用this指向当前元素 #

// 获取所有目标元素
const expandImages = document.getElementsByClassName('website_image');

// 定义展开函数
function expand() {
  this.style.padding = '11%';
}

// 循环绑定事件
for (let i = 0; i < expandImages.length; i++) {
  expandImages[i].addEventListener('mouseover', expand);
}

方式二：使用event.target #

如果习惯用事件对象，也可以这么写：

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

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

for (let i = 0; i < expandImages.length; i++) {
  expandImages[i].addEventListener('mouseover', expand);
}

更简洁的方式：转数组后用forEach #

如果浏览器支持ES6+，可以把HTMLCollection转成数组，用forEach遍历，代码更简洁：

const expandImages = Array.from(document.getElementsByClassName('website_image'));

expandImages.forEach(img => {
  img.addEventListener('mouseover', () => {
    img.style.padding = '11%';
  });
});

内容的提问来源于stack exchange，提问作者Julia