Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Sobre a escrita em jQuery

Referente ao curso Web Design Responsivo: Páginas que se adaptam do mobile ao desk, no capítulo Menu Responsivo e atividade Projeto #2

por Rafael de Almeida Gualberto
| 106.1k xp | 12 posts

Olá sobre a escrita do código em jQuery gostaria de confirmar se é como escrevi abaixo ou se deve ser de outra forma, fiz a aula de jQuery pouco antes dessa e gostaria apenas de sanar essa dúvida para melhorar.

Código da aula:

document.querySelector('.menu-abrir').onclick = function() {
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function() {
    document.documentElement.classList.remove('menu-ativo');
};

Meu jQuery:

$(".menu-abrir").click = function() {
  classList.addClass("menu-ativo");  
};
$(".menu-fechar").click = function() {
  classList.removeClass("menu-ativo");  
};

Desde já agradeço a atenção :)

7 respostas
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Se funcionar está ótimo! Eu não sabia que poderia ser escrito dessa forma (talvez por que eu ainda não tenha feito o curso de jQuery hahaha). Mas acho que eu escreveria assim:

$(".menu-abrir").on("click", function() {
     $(this).addClass("menu-ativo");  
});
$(".menu-fechar").on("click", function() {
    $(this).removeClass("menu-ativo");  
});

Mas já que estamos só adicionando e removendo uma classe, podemos fazer também (se tivessemos apenas uma classe para o botão):

$(".menu-acao").on("click", function() {
     $(this).toggleClass("menu-ativo");  
});

E reduzir ainda mais:

$(".menu-acao").click(function() {
     $(this).toggleClass("menu-ativo");  
});
por Rafael de Almeida Gualberto
| 106.1k xp | 12 posts

Nossa tinha esquecido do toggleClass, muito bom, valeu pelo retorno, ainda estou aprendendo é sempre bom ver mais opções :). Sobre o meu código ainda não testei :p, estava curioso mesmo para saber como escrever.

solução!
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Rafael, no jquery pra adicionar o evento precisa fazer a chamada do on como o Wanderson mostrou. Do jeito que vc fez .click = não funciona.

Só um detalhe a mais: no codigo original adicionamos a classe no document.documentElement. Esse cara é o <html> entao precisa fazer:

$('html').toggleClass("menu-ativo");

E daria pra fazer essa ideia do toggle adicionando eventos nos elementos de uma vez (sem criar a classe acao que o Wanderson sugeriu):

$(".menu-abrir, .menu-fechar").click(function() {
     $('html').toggleClass("menu-ativo");  
});
por Rafael de Almeida Gualberto
| 106.1k xp | 12 posts

Nossa, muito bom, obrigado pelo esclarecimento Sérgio :)

por Rafael de Almeida Gualberto
| 106.1k xp | 12 posts

Outra dúvida que reparei agora, rs, nesse exemplo que mandou não teria o ".on" também não?

$(".menu-abrir, .menu-fechar").on("click", function() {
     $("html").toggleClass("menu-ativo"));  
});
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Ambas funcionam na verdade. click() é um atalho pra on('click'): https://api.jquery.com/click/

por Rafael de Almeida Gualberto
| 106.1k xp | 12 posts

Muito bom mesmo, vlw pela resposta Sérgio, e parabéns pelo curso também, está me ajudando e muito.