es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo funciona la igualdad en javascript

Estoy creando un menú móvil. Quiero cambiar la clase en <i></i>. El primer paso funciona y elimina la clase ‘fa-bars’ y agrega ‘fa-times’. Pero el segundo paso no funciona.

     

let menuActive = document.querySelectorAll('.menuToggle i')
var element = document.getElementById('test');

if(element.classList.contains('fa-bars')){
    function Activemenu(){
        menuActive.forEach((item) => item.classList.remove('fa-bars'));
        this.classList.add('fa-times');
    } 
}else if(element.classList.contains('fa-bars')){
    function Activemenu(){
        menuActive.forEach((item) => item.classList.remove('fa-times'));
        this.classList.add('fa-bars');
    }  
}
menuActive.forEach((item) =>
    item.addEventListener('click',Activemenu));
Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que la instrucción if-else en el fragmento de código no está estructurada correctamente. Ambas condiciones verifican la misma clase “fa-bars”, por lo tanto, la condición else nunca será ejecutada. Para solucionar esto, la segunda condición debería verificar la clase “fa-times” en su lugar.

    Aquí está el código actualizado:

    let menuActive = document.querySelectorAll('.menuToggle i');
    var element = document.getElementById('test');
    
    function Activemenu(){
        if(element.classList.contains('fa-bars')){
            menuActive.forEach((item) =>{
                item.classList.remove('fa-bars');
            });
            this.classList.add('fa-times');
        }else if(element.classList.contains('fa-times')){
            menuActive.forEach((item) =>{
                item.classList.remove('fa-times');
            });
            this.classList.add('fa-bars');
        }  
    }
    
    menuActive.forEach((item) =>
        item.addEventListener('click',Activemenu));
    

    En esta versión actualizada, la declaración if verifica la clase “fa-bars” y la declaración else if verifica la clase “fa-times”. Esto permitirá que se elimine y agregue la clase correcta según el estado actual del icono de menú.

Comments are closed.