¡Al hacer clic en uno de los cinco botones, desea cambiar el color del texto h1 por el orden del índice de colores de las listas! De modo que el primer botón establezca el color en las listas del 1er índice, y así sucesivamente.
$("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>Solo se cambió parte del código JS.
En realidad, no debe usar "para", $ ("botón"). Haga clic en Agregar detector de eventos a todos los botones. El índice del botón que se presionaría se puede obtener de esta manera var indexOfButton = $('button').index(this);
y después de usarlo, puede obtener el resultado esperado.
$("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>Obviamente, es posible hacerlo de esa manera, pero ¿estás seguro de que sería un código legible? No ve lo que hacen estos botones cuando lee el HTML.
En cambio, sugeriría vincular el botón con el color directamente, así:
<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>Luego, puede hacer que se pueda hacer clic en ellos:
$("button").click(function() { $("h1").css("color", $(this).data("color")); });No se necesita bucle de esa manera.
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>