如何点击按钮按颜色列表索引顺序修改h1文本颜色（jQuery实现）

问题根因 #

你代码无法正常运行有两个核心原因：

1. var关键字声明的变量没有块级作用域：循环执行结束后变量i的值已经变成了5，所有按钮的点击事件触发时，引用的都是同一个最终值为5的i，colorSet的最大索引是4，访问colorSet[5]会得到undefined，导致颜色设置失效。
2. 事件绑定写法错误：$("button")[i]取到的是原生DOM对象，调用click()方法是触发点击动作，不是绑定点击事件回调。

解决方法 #

方法1：替换变量声明关键字+调整绑定写法 #

把循环里的var i改成let i，let支持块级作用域，每次循环都会生成独立的作用域保存当前的i值，对应到每个按钮的点击事件中；同时用jQuery的eq()方法获取对应索引的jQuery对象来绑定事件。
修改后的JS代码：

$("h1").addClass("big-title margin-50");

const colorSet = ["black", "brown", "red", "green", "orange"];
for (let i = 0; i < 5; i++) {
  $("button").eq(i).click(function() {
    $("h1").css("color", colorSet[i])
  });
}

方法2：使用jQuery内置方法简化绑定（更推荐） #

不需要手动循环绑定，直接通过jQuery的事件绑定和索引获取方法实现，代码更简洁易维护：

$("h1").addClass("big-title margin-50");
const colorSet = ["black", "brown", "red", "green", "orange"];

$("button").click(function() {
  // 获取当前点击按钮在所有按钮中的索引
  const btnIndex = $("button").index(this);
  $("h1").css("color", colorSet[btnIndex]);
})

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