无法循环绑定click事件执行动画：报Cannot set properties of undefined错误

报错Cannot set properties of undefined (setting 'width')的核心原因是：你的moveElements函数里引用的目标元素是全局固定的单个元素，或者没有正确关联当前点击的.arrow-start元素对应的动画目标，导致循环绑定后，点击部分箭头时找不到对应目标元素，出现undefined。

你完全不需要把moveElements整个放进循环——重复定义函数既冗余又没必要，只需要让函数能正确获取当前点击上下文对应的元素即可。

修正思路与代码示例 #

假设你的HTML结构是每个.arrow-start对应一个同容器内的动画目标（示例结构如下）：

<div class="item-container">
  <div class="arrow-start">点击触发</div>
  <div class="animate-target">要动的元素</div>
</div>
<div class="item-container">
  <div class="arrow-start">点击触发</div>
  <div class="animate-target">要动的元素</div>
</div>

方案1：通过事件回调传递当前元素 #

// 获取所有箭头元素
const arrows = document.querySelectorAll('.arrow-start');

// 让moveElements接收当前点击的箭头作为参数
function moveElements(clickedArrow) {
  // 根据HTML结构，找到当前箭头对应的目标元素（这里用兄弟元素举例，按需调整）
  const target = clickedArrow.nextElementSibling;
  // 先判断元素存在，避免报错
  if (target) {
    target.style.width = '200px'; // 替换成你的动画逻辑
  }
}

// 循环绑定点击事件，把当前箭头传入函数
arrows.forEach(arrow => {
  arrow.addEventListener('click', () => {
    moveElements(arrow);
  });
});

方案2：利用事件对象获取点击元素（更简洁） #

const arrows = document.querySelectorAll('.arrow-start');

// 通过事件对象e获取点击的箭头元素
function moveElements(e) {
  const clickedArrow = e.target;
  // 用closest找到父容器，再定位目标元素（适配更复杂的HTML结构）
  const target = clickedArrow.closest('.item-container').querySelector('.animate-target');
  if (target) {
    target.style.width = '200px'; // 替换成你的动画逻辑
  }
}

// 直接绑定函数，事件对象会自动传入
arrows.forEach(arrow => {
  arrow.addEventListener('click', moveElements);
});

为什么单个元素能正常运行？ #

单个元素绑定的时候，你引用的目标元素刚好存在且对应，但循环绑定后，函数里的全局元素引用无法匹配每个箭头对应的目标，就会出现undefined的情况。

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