Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Sobre o DOM Element

Galera me ajuda pfv! Existe algum jeito de eu selecionar um elemento ativo e colocar na condicional, ex:

const elemento = document.querySelector('.meu-elemento')

if(elemento.OElementoAtivoNoMomento){
   elemento.style.color = 'red';
}
else{
   elemento.style.color = 'blue';
}

Queria saber se eu consigo selecionar uma espécie de "currentElement" para na hora de um evento 'click' por exemplo eu consiga aplicar um código apenas no elemento clicado e retirar dos outros

5 respostas

Fala ai André, tudo bem? Existe o document.activeElement que basicamente vai pegar o ultimo elemento que tinha focus.

Não entendi muito bem o que você quer fazer, mas, talvez ele lhe ajude.

Espero ter ajudado.

Então chefe! Escrevi o texto inteiro aqui e a Alura não deixou pq tem mais de 5k de caractéres mas vou resumir kbls pra ti

Tenho esse código aqui

const asideMenuLi = document.querySelectorAll('.carrossel__menu__item');
const asideMenuLinks = document.querySelectorAll('.carrossel__menu a[href^="#"]');

function selecionaSlide(event){
    event.preventDefault();
    const site = event.target;
    const siteId = site.getAttribute('href');
    const siteSelecionado = document.querySelector(siteId);
}
function slideshow(event){
    event.preventDefault();
    configuraçõesGerais._slide();
    selecionaSlide();
}
asideMenuLinks.forEach(link =>{
    link.addEventListener('click', slideshow);
})

const configuraçõesGerais = {
    primeiroSite: function(){
        const primeiroSite = document.querySelectorAll('.carrossel__trabalhos div');
        const primeiroSiteMenu = document.querySelectorAll('.carrossel__menu__lista li');
        primeiroSite[0].classList.add('carrossel__item--ativo');
        primeiroSiteMenu[0].classList.add('menu--selecionado');
        configuraçõesGerais._descricao(primeiroSite);
    },
    _descricao: function(){
        const attributeNameTag = document.querySelectorAll('.carrossel__site');
        const tagsDescricao = document.querySelectorAll('.carrossel__descricao');
        tagsDescricao.forEach((tag, index) =>{
            let legenda = attributeNameTag[index].getAttribute('name');
            tag.innerHTML = legenda;
        })
    },
    _slide: function(){
        slideAtivo = document.querySelector('.carrossel__item--ativo');
        menuAtivo = document.querySelector('.menu--selecionado');

        if(slideAtivo.nextElementSibling){
            slideAtivo.nextElementSibling.classList.add('carrossel__item--ativo');
            slideAtivo.classList.remove('carrossel__item--ativo');
        }
        if(menuAtivo.nextElementSibling){
            menuAtivo.nextElementSibling.classList.add('menu--selecionado');
            menuAtivo.classList.remove('menu--selecionado');
        }
        else{
            slideAtivo.classList.remove('carrossel__item--ativo');
            menuAtivo.classList.remove('menu--selecionado');
            configuraçõesGerais.primeiroSite();
        }
    }
};
configuraçõesGerais.primeiroSite();
configuraçõesGerais._descricao();
configuraçõesGerais._slide();

O que eu quero é o seguinte, no objeto _slide, eu preciso que dentro das regras de condicional do if eu consiga selecionar APENAS o objeto clicado e assim implementar as regras que eu preciso (é basicamente essas que estão nele mesmo), adicionar 2 classes; 1 ao Menu e 1 ao Item referenciado pelo menu; retirar estas 2 classes de qualquer elemento irmão do elemento que foi clicado e só adicionar essas classes no elemento SE eu clicar nele :D

solução!

Fala ai André, nesse caso tu pode chamar a função _slide dentro do listener de click de cada slide.

Basicamente dentro da função slideshow que é adicionada para todos os links do menu.

Como não tenho muito contexto de projeto e funcionalidade, fica um pouco dificil, mas, acho que essa seria uma solução válida.

Espero ter ajudado.

Acabou que eu achei uma solução criando uma classe no javascript e esqueci do fórum KKKKK

Mas muito obrigado :D

Boa André, fico feliz que tenha conseguido resolver.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos