0

soy nuevo en la programacion con javascript, he estado desarrollando un blog y me estanque en un problema relativamente sencillo pero para mi no del todo

lo que quiero hacer es cambiar un icono de flecha apuntando hacia abajo por uno que apunta hacia arriba cada que deslizo el cursor por el nav,como si de un efecto se tratase,el problema es que solo se le aplica a un solo elemento cuando utilizo queryselector, esta ves utilize queryselectorall para acceder a la node list y recorrerla segun lo que he visto hasta ahora en la documentacion para poder aplicar ese efecto a todos los elementos. lo malo es que realmente no sucede y pasa exactamente lo mismo que con queryselector. he buscado documentacion y videos al respecto pero no he encontrado algo realmente util para mi caso,alguien conoce alguna funcionalidad adicional, o acaso mi logica no es la adecuada?

para no agregar mas contenido solo use un elemento li,pero son como 4 y tienen la clase topic, a la cual quiero llamar para activar los eventos

const selectNav = document.querySelectorAll("topic");
selectNav.forEach((index)=>{

            index.addEventListener('mouseover',function(){

                const selectIcon = document.querySelector('.select');
        
                if(selectIcon.classList.contains('fa-angle-down') == true){
                    selectIcon.classList.remove('fa-angle-down');
                    selectIcon.classList.add('fa-angle-up');
                }
               
            });
        
            index.addEventListener('mouseout',function(){
        
                const selectIcon = document.querySelector('.select');
        
                if(selectIcon.classList.contains('fa-angle-up') == true){
                    selectIcon.classList.remove('fa-angle-up');
                    selectIcon.classList.add('fa-angle-down');
                }
            });


       });
<li class="topic"><a href="">proyectos <i class="fas fa-angle-down select"></i></a>
                            <ul>
                                <li><a href="">lista1</a></li>
                                <li><a href="">lista2</a></li>
                                <li><a href="">lista3</a></li>
                            </ul>
                        </li>
                        
                        

1 respuesta 1

0

Te tengo unas cuantas observaciones en cuanto a tu código.

El parámetro de la función document.querySelectorAll debe de ser una cadena de texto con un selector CSS, por lo que veo que te falto el punto, el código sería algo así document.querySelectorAll('.topic');.

Ahora, document.querySelector retorna el primer elemento que encuentre en el HTMl que coincida con el selector CSS pasado como parámetro. Pero no te preocupes. Ya que la variable selectNav contiene una lista de elementos(array), y con el método forEach se recorren cada uno de estos elementos, entonces en lugar de hacer un document.querySelector puedes hacer perfectamente un index.querySelector('.select') y esto buscara dentro del elemento actual que se esta iterando. Ya con esto debería de funcionar, te dejo como quedaría en código.

const selectNav = document.querySelectorAll(".topic");
selectNav.forEach((index)=>{

            index.addEventListener('mouseover',function(){

                const selectIcon = index.querySelector('.select');
        
                if(selectIcon.classList.contains('fa-angle-down') == true){
                    selectIcon.classList.remove('fa-angle-down');
                    selectIcon.classList.add('fa-angle-up');
                }
               
            });
        
            index.addEventListener('mouseout',function(){
        
                const selectIcon = index.querySelector('.select');
        
                if(selectIcon.classList.contains('fa-angle-up') == true){
                    selectIcon.classList.remove('fa-angle-up');
                    selectIcon.classList.add('fa-angle-down');
                }
            });


       });

1
  • Hermano, muchisismas gracias por tu ayuda,funciono definitivamente por fin;se me habia olvidado.index en selectIcon hahaha,pero bueno no importa en el caso de queryselectorall si habia agregado el punto pero cuando estaba editando el codigo por alguna razon puse el fragmento que estaba utilizando con getelementbyclassname,algo que definitivamente debo checar antes :D. oye me surgio una pregunta respecto a foreach,como es posible que pueda recorrerse la lista y regresar del tercer elemento al primero dinamicamente?, si es una iteracion,normalmente es ascendente
    – Sergio VG
    Commented el 25 may. 2021 a las 20:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.