0

Estoy aprendiendo Jquery y quería pasar un codigo que ya tengo hecho en JavaScript y funciona perfecto a código Jquery para practicar y para dejar un código más limpio y fácil de mantener. Me estoy encontrando con un problema. No entiendo que estoy poniendo mal. A ver si me pueden ayudar. Este es mi codigo JavaScript que funciona perfecto.

const closeButton = document.querySelector(".cerrar-nav");
const openButton = document.querySelector(".abrir-nav");
const nav = document.querySelector(".nav");

closeButton.addEventListener("click", () => {
  nav.classList.remove("nav-abierta");
});

openButton.addEventListener("click", () => {
  nav.classList.add("nav-abierta");
});

Es una simple barra que de navegador que se despliega. Ahora les adjunto como lo escribí en Jquery a ver si me pueden decir que hice mal.

const cerrarBtn = $(".cerrar-nav");
const abrirBtn = $(".abrir-nav");
const nav = $(".nav");

cerrarBtn.on("click", quitarClase);

function quitarClase() {
  nav.removeClass(".nav-abierta");
}

abrirBtn.on("click", sumarClase);

function sumarClase() {
  nav.addClass(".nav-abierta");
}

Como veran lo unico que hice fue cambiar los selectores de DOM de JS por los selectores de Jquery y luego crear las mismas funciones pero con Jquery.

6
  • primero que nada, pregunta obvia, pero estas incluyendo en tu codigo el cdn de jquery? y por otro lado, cuando llamas a la funcion cerrarBtn.on("click", quitarClase); no deberias usar cerrarBtn.on("click", quitarClase()) (poner parentesis al final del nombre de la funcion, para que el codigo entienda que se trata de ella
    – Agustin G.
    el 14 feb. 2020 a las 19:25
  • quise cerrar con un signo de pregunta y ya no me deja editarlo. Quise decir "no deberias usar parentesis al finalizar una funcion??" -> Desconozco si se pueden llamar funciones en js omitiendo el () al final de la funcion, por eso digo que tal vez tu error venga por ese lado.
    – Agustin G.
    el 14 feb. 2020 a las 19:33
  • @Mani el CDN de jquery esta funcionando. Ya lo he testeado. Lo de la función he probado de ambas formas e igualmente no funciona
    – Daro
    el 14 feb. 2020 a las 19:34
  • bien, no se bien que puede estar pasando, pero estoy googleando y no puedo encontrar, si se puede llamar una funcion y declararla mas abajo. Si primero pones la funcion, y abajo de esta realizas la llamada, el error persiste??
    – Agustin G.
    el 14 feb. 2020 a las 19:40
  • Sería bueno que pasaras el HTML.
    – Alvarez
    el 14 feb. 2020 a las 19:43

1 respuesta 1

1

El código no funciona porque estás poniendo el punto en el removeClass, debes poner solamente la clase que quieres remover.

Quizá estás confundiendo removeClass(), que es una función, con los selectores. En jQuery el selector de clase es .nombre-Clase, pero las funciones como removeClass deben recibir en parámetro el nombre de la clase (sin el punto), como bien explica la documentación.

const cerrarBtn = $(".cerrar-nav"); 
cerrarBtn.on("click", quitarClase); 
const nav = $(".nav");              


function quitarClase() {
  nav.removeClass("nav-abierta"); 
  console.log(1);
  console.log(nav.prop("classList"));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav cerrar-nav nav-abierta">Click Aquí</nav>

Aunque el código anterior migrado realmente a jQuery, se vería así:

const nav = $(".nav");

$(".cerrar-nav").on('click', function(event) {
  console.log(1);
  nav.removeClass( 'nav-abierta' );
  console.log(nav.prop("classList"));

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-1" class="nav cerrar-nav nav-abierta">Click Aquí: Nav 1</nav>

<nav id="nav-2" class="nav cerrar-nav">Click Aquí: Nav 2</nav>
<nav id="nav-2" class="nav cerrar-nav nav-abierta">Click Aquí: Nav 3</nav>

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.