1

Investigando un poco de jquery, he encontrado esta función:

$(function() {
    $("#sidebarCollapse").on("click", function() {
        $("#sidebar, #content").toggleClass("active");
    });
});

Estoy aprendiendo a programar en javascript, aun no sé mucho, quisiera saber como podría pasar la función de arriba a javascript, Me podéis explicar por favor como funciona el código de jquery y como convertir a javascript.

Muchas gracias de antemano.

1
  • jQuery es una librería escrita en Javascript, no es algo distinto a Javascript. Lo que sí se puede hacer es reescribir el código para que no haga uso de jQuery. Ese trozo de código hace lo siguiente: Cuando se carga la página, añade cierto comportamiento a un elemento con id sidebarCollapse: que cuando se haga click sobre él, a los elementos con id sidebar y content se le añade/quita la clase active Commented el 18 jun. 2021 a las 8:43

2 respuestas 2

0

Esa función se podria poner en JS así:

document.getElementById('sidebarCollapse').addEventListener('click', ()=>{
    Document.getElementById('sidebar').classList.toggle('active');
    Document.getElementById('content').classList.toggle('active');
});

Con esta forma, seleccionas los elementos por ID, en este caso, sidebarCollapse. Le añades un addEventListener, para que dicho elemento ESPERE un evento, en este caso, el click. Una vez hecho el click, comienza la función vacía, donde seleccionas los dos elementos y les instercambias las clases.

0
   document.getElementById('sidebarCollapse').addEventListener('click', ()=>{
   var elementos = document.querySelectorAll('#sidebar, #content'); 
   elementos.forEach(function(e) {
      e.classList.toggle('active')
   });
});

en la primer linea se accede al ID #sidebarCollapse y se agrega un escuchador de evento click

en la segunda linea, una vez que se dispara el evento click, se declara en la variable elementos el resultado de tu querySelectorAll que en jQuery sería $("#sidebar, #content"), el contenido de esa variable sera un arreglo con los elementos del DOM que haya encontrado

en la tercer linea se hace un foreach a ese arreglo, pasando un argumento a la función anomina

en la cuarta linea, accedes a la propiedad classList del argumento de la función anonima y seguido al metodo toggle() pasando como parámetro el nombre de la clase que quieres agregar o quitar

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.