通过点击五个按钮之一想要改变h1文本的颜色列表颜色索引顺序!因此，第一个按钮设置列表的颜色，第一个索引，等等。
$("h1").addClass("big-title margin-50");
colorSet = ["black", "brown", "red", "green", "orange"];
for (var i = 0; i < 5; i++) {
$("button")[i].click(function() {
$("h1").css("color", colorSet[i].toString())
});
}.big-title {
color: yellow;
font-size: 10rem;
font-family: cursive;
}
.margin-50 {
margin: 50px;
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JQuery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<a href="https://www.google.com">Search</a>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>只更改了JS部分的代码。
实际上你不应该使用"for"， $("button")。单击向所有按钮添加事件侦听器。按下按钮的索引，你可以通过这种方式得到var indexOfButton = $('button').index(this);
，使用后，您可以得到预期的结果。
$("h1").addClass("big-title margin-50");
colorSet = ["black", "brown", "red", "green", "orange"];
$("button").click(function(m){
var indexOfButton = $('button').index(this);
$("h1").css("color", colorSet[indexOfButton].toString());
});.big-title {
color: yellow;
font-size: 10rem;
font-family: cursive;
}
.margin-50 {
margin: 50px;
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JQuery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<a href="https://www.google.com">Search</a>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<button type="button" name="button">Click me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>显然可以这样做，但是您确定这将是一个可读的代码吗?当你阅读HTML时，你不会看到这些按钮的作用。
相反，我建议直接将按钮与颜色链接起来，像这样:
<button type="button" name="button" data-color="black">Click me</button>
<button type="button" name="button" data-color="brown">Click me</button>
<button type="button" name="button" data-color="red">Click me</button>
<button type="button" name="button" data-color="green">Click me</button>
<button type="button" name="button" data-color="orange">Click me</button>
然后，你可以使它们可点击:
$("button").click(function() {
$("h1").css("color", $(this).data("color"));
});
这种方式不需要循环。
const hText = document.querySelector('h1');
const colors = ['green', 'blue', 'red', 'violet', 'black'];
document.addEventListener('click', function (event) {
if (event.target.matches('#one')){
hText.style.color = colors[0];
}
if (event.target.matches('#two')){
hText.style.color = colors[1];
}
if (event.target.matches('#three')){
hText.style.color = colors[2];
}
if (event.target.matches('#four')){
hText.style.color = colors[3];
}
if (event.target.matches('#five')){
hText.style.color = colors[4];
}
}, false);h1 {
font-size: 5rem;
font-family: cursive;
}<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>JQuery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<a href="https://www.google.com">Search</a>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<script src="index.js" charset="utf-8"></script>
</body>
</html>