Tengo una lista y quiero activar un evento individualmente con el mismo código javascript sin definir una identificación para cada uno. Por ejemplo, cuando hago clic en cada elemento, quiero que el texto interno cambie al color que dice. En otras palabras, quiero que el código sepa dónde estoy haciendo clic y aplique la función a ese elemento en particular, y no quiero usar id=color1", id=color2", id=color3". ¡Se agradece cualquier ayuda!
<ul> <li onclick="jsCode" id="color">Red<li> <li onclick="jsCode" id="color">Blue<li> <li onclick="jsCode" id="color">Green<li> </ul>Creo que la forma más fácil de hacer esto es agregar un atributo de datos a cada elemento de la lista que haga referencia al color y luego agregar ese color (definido en el CSS) a la classList del elemento.
const list = document.querySelector('ul'); list.addEventListener('click', handleClick, false); function handleClick(e) { if (e.target.matches('li')) { const { id } = e.target.dataset; e.target.classList.add(id); } } .red { color: red; } .blue { color: blue; } .green { color: green; } li:hover { cursor: pointer; } <ul> <li data-id="red">Red</li> <li data-id="blue">Blue</li> <li data-id="green">Green</li> </ul>Documentación adicional
O si no desea utilizar atributos de datos, elija el color del contenido del texto de cada elemento de la lista.
const list = document.querySelector('ul'); list.addEventListener('click', handleClick, false); function handleClick(e) { if (e.target.matches('li')) { const { textContent } = e.target; const color = textContent.toLowerCase(); e.target.classList.add(color); } } .red { color: red; } .blue { color: blue; } .green { color: green; } li:hover { cursor: pointer; } <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul>Advertencia: Su problema aquí es que los estándares XHTML no permiten múltiples elementos con la misma ID. Esto simplemente no está permitido en XML, XHTML o HTML 5. Esto no es solo una mala práctica, sino un código que probablemente se romperá en producción a medida que su aplicación se haga más grande y menos mantenible.
Si está utilizando la misma ID para poder diseñar los elementos de la misma manera, entonces debería usar clases:
<li class="color" id="red">Red</li> <li class="color" id="blue">Blue</li> <li class="color" id="green">Green</li>querySelectorAll El uso de document.getElementById apuntará solo al primer elemento con el ID especificado (consulte la advertencia anterior).
Si aún insiste en tener varios elementos con la misma ID, entonces queda una solución (aunque proceda con precaución).
document.querySelectorAll aceptará un selector de consulta (similar a los selectores de CSS) como parámetro y buscará todos los elementos que coincidan con el selector de consulta proporcionado. Entonces document.querySelectorAll('li') devolverá una NodeList (similar a una matriz) de elementos <li /> . Puede usar la misma función para tomar todos los elementos con id="color" :
const colors = Array.from(document.querySelectorAll('#color')); colors.forEach(listItem => { const color = listItem.textContent.toUpperCase(); listItem.addEventListener('click', () => { alert(`You clicked on ${color}`); }); });Puede ver este codepen para una demostración: https://codepen.io/virajshah21/pen/gOvvqEj