Acabo de empezar a aprender javascript y jquery, traté de agregar y eliminar clases con este código
if ($(".head").hasClass("collapsed")) { $(".fas").addClass("fa-chevron-down"); $(".fas").removeClass("fa-chevron-up"); } else { $(".fas").addClass("fa-chevron-up"); $(".fas").removeClass("fa-chevron-down"); } Pero el código es para agregar/eliminar clases a la vez para todos los .head cuando hago clic en un .head en particular que quiero agregar/eliminar las clases.
También traté de usar querySelectorAll() en el código a continuación, pero parece ser un error con los mensajes de advertencia "jQuery.Excepción diferida: x[i].hasClass no es una función TypeError: x[i].hasClass no es una función" y "TypeError no detectado: x[i].hasClass no es una función"
var x = document.querySelectorAll(".head"); for (var i = 0; i < x.length; i++) { if (x.hasClass("collapsed")) { $(".fas").addClass("fa-chevron-down"); $(".fas").removeClass("fa-chevron-up"); } else { $(".fas").addClass("fa-chevron-up"); $(".fas").removeClass("fa-chevron-down"); } } ¿No es posible usar querySelectorAll() junto con hasClass() ?
si es posible, ¿cómo usarlo o hay una solución alternativa a mi problema?
¡Gracias por adelantado!
En su código, x es un NodeList y no tiene hasClass . Además x.hasClass es incorrecto ya que desea acceder a cada elemento de la colección.
Puedes probar con $(x[i]).hasClass
De lo contrario, puede hacer document.querySelectorAll(".head.collapsed")
var x = document.querySelectorAll(".head.collapsed").forEach((item) => { item.classList.add('customClass') }) .customClass { color: green } <div class="head collapsed"> Test1</div> <div class="head"> Test2</div> <div class="head collapsed"> Test3</div> <div class="head"> Test4</div>