Así que estoy jugando con Font Awesome y BootStrap, y estoy buscando una manera de alternar mi icono de estrella en el botón. El problema es que está dentro de un bucle.
{% for i in X %} <button id="{{i.id}}"><span class="class1" id="StarIcon"></span></button> {% endfor %}Quiero cambiar el intervalo respectivo de 'clase1' a 'clase2' al hacer clic, sin embargo, saber cómo cambiarlos todos o incluso solo el último ya sería de ayuda.
Puede usar classList.add() y classList.remove() :
const el = document.getElementById('someButton'); document.getElementById('{{i.id}}').onclick = () => { el.classList.add('class2'); el.classList.remove('class1') } <button id="{{i.id}}"><i id="someButton" class="class1" id="StarIcon">Button!</i></button>No estoy seguro si te entendí bien, pero probablemente estés buscando algo como esto:
{% for i in X %} <button id="{{i.id}}"><span class="class1" id="StarIcon" onclick="btnClick(this)"></span></button> {% endfor %}...
function btnClick(el) { const spanEl = el.querySelector('#StarIcon'); if (spanEl.classList.contains('class1')) { setClass2(spanEl); } else if (spanEl.classList.contains('class2')) { setClass1(spanEl); } } function setClass1(el) { el.classList.add('class1'); el.classList.remove('class2'); } function setClass2(el) { el.classList.add('class2'); el.classList.remove('class1'); }