jQuery循环绑定.main-head1-9鼠标悬停事件失效该如何解决？

问题根因与解决方法 #

你原有代码失效的核心原因是：

• 事件回调执行时循环已经跑完，var声明的sfq变量最终值为.main-head9，所有元素触发悬停时都会操作第9个元素
• 事件回调内直接依赖外部循环变量选择元素，逻辑稳定性差，建议直接获取当前触发事件的元素

最优解决方法（无需循环，适配性更强） #

直接批量选中所有符合命名规则的元素绑定事件，不用写循环：

// 选中所有类名包含main-head的元素，批量绑定悬停事件
$('[class*="main-head"]').mouseover(function() {
  const $currentEl = $(this);
  $currentEl.addClass('colorChangeOnMouseOver');
  setTimeout(() => $currentEl.removeClass('colorChangeOnMouseOver'), 500);
});

循环写法的修正版 #

如果你一定要用循环实现，可调整为如下写法：

// 用let声明变量形成块级作用域，同时用this获取当前触发元素
for (let i = 1; i < 10; i++) {
  $(`.main-head${i}`).mouseover(function() {
    $(this).addClass("colorChangeOnMouseOver");
    setTimeout(() => $(this).removeClass("colorChangeOnMouseOver"), 500);
  })
}

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