Quiero cambiar las clases de un grupo de elementos en otras clases. Las clases actuales de los elementos son todas diferentes y también lo son las clases a las que quiero cambiar sus clases actuales.
Actualmente, la mejor idea que tengo es verificar la clase actual del elemento y luego cambiarlo de acuerdo con su clase, repitiendo esto para la cantidad de elementos que necesito cambiar. Por ejemplo, si quisiera cambiar todos los elementos con la clase 'a' a la clase 'z' y 'b' a 'y', etc., haría esto:
var classes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' , 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var classes_product = ['z', 'y', 'x', 'w', 'v', 'u', 't', 's', 'r', 'q', 'p', 'o', 'n', 'm', 'l', 'k', 'j', 'i', 'h', 'g', 'f', 'e', 'd', 'c', 'b', 'a']; for (let i = 0; i < classes.length; i++) { var x = document.getElementsByClassName(classes[i]); for (let j = 0; j < x.length; j++) { x[j].className = classes_product[i]; } }Traté de resolver este problema yo mismo, pero todo lo que pude encontrar fue la posibilidad de cambiar la clase usando ".className". Realmente agradecería otro método que no requiera escribir tanto porque necesito hacer algunos cambios para que funcionen algunas de mis funciones.
Tu código actual tiene errores.
getElementsByClassName devuelve una colección en vivo. Si elimina una clase de un elemento mientras itera sobre la colección, los elementos de la colección se desplazarán hacia abajo; su implementación actual omitirá algunos elementos.a a z , al final del ciclo, las cambiará nuevamente a a .Si bien podría construir una colección de todos los elementos coincidentes por adelantado, luego iterar sobre ellos, con la ayuda de un mapeo de clases a sus resultados...
const classTransformations = { a: 'z', b: 'y', c: 'x', // ... }; Object.entries(classTransformations) .map(([initial, final]) => ({ elements: document.querySelectorAll('.' + initial), final })) .forEach(({ elements, final }) => { for (const elm of elements) elm.classList = final; });Probablemente sería mejor dar un paso atrás y pensar en lo que se pretende hacer al cambiar todas estas clases, y si hay una forma DRY-er de hacerlo.
Si, como parece mostrar su código original, solo necesita alternar entre dos estados, puede alternar una sola clase en un solo elemento principal y cambiar sus reglas CSS de manera adecuada, de modo que, por ejemplo, .parent .a resulte en las reglas para la clase a inicial y .parent.toggled .a da como resultado las reglas para la clase z alternada.
var classes = ['a', 'b', 'c', 'd']; var classes_product = ['d', 'c', 'b', 'a']; classes.forEach(function (item) { var x = document.getElementsByClassName(item); for (let j = 0; j < x.length; j++) { const element = x[j]; element.classList.add(classes_product[j]); element.classList.remove(item); } }); .a { color: red; } .b { color: blue; } .c { color: green; } .d { color: grey; } <div> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> </div>