1

Gostaria de saber uma possibilidade de um algoritmo para eu venha selecionar um um DOM de uma forma mais dinâmica, sem ter a necessidade de usar o getElementById toda a vez.

Eu gostaria de selecionar todos os elementos e manipular no JS. Alguém pode me ajudar nisso, por favor?

<section id="step00" class="slide">        
</section>

<section id="step01" class="slide">        
</section>

Na verdade, estou tentando exibir e esconder os passos a cada click. Tipo Step By Step.

Imagine eu ter que fazer tudo isso:

const step00 = document.getElementById('step00')
const step01 = document.getElementById('step01')
const step02 = document.getElementById('step02')
const step03 = document.getElementById('step03')
const step04 = document.getElementById('step04')
const step05 = document.getElementById('step05')
const step06 = document.getElementById('step06')
const step07 = document.getElementById('step07')
const step08 = document.getElementById('step08')
const step09 = document.getElementById('step09')
const step10 = document.getElementById('step10')
const endTutorial = document.getElementById('endTutorial')

function initTutorial() {
    showStep00()
}

function showStep00() {
    console.log('Inicio o passo 0')
    step00.removeAttribute('hidden')
    step01.setAttribute('hidden', 'true')
}

function showStep01() {
    console.log('Inicio o passo 1')
    step00.setAttribute('hidden', 'true')
    step01.removeAttribute('hidden')
}

Deve existir algo mais dinâmico, onde quando eu clicar em um botão com onclick="step03", por exemplo, todos os outros botões são escondidos.

4
  • 1
    Selecione pela classe, com getElementsByClassName(), assim seleciona todos de uma vez. Lembrando que vai retornar um array de elementos, aí você tem que percorrer o array pra fazer as alterações. Commented 11/07/2018 às 19:04
  • 1
    Como vc quer pegar o elemento? por clique?
    – Sam
    Commented 11/07/2018 às 19:10
  • Eu vou usar onclick no HTML para exibir e esconder os Steps() Commented 11/07/2018 às 19:18
  • eu vou atualizar meu caso para vcs verem o que estou tentando fazer... Commented 11/07/2018 às 19:20

1 Resposta 1

2

Pode usar document.querySelectorAll(".slide") para criar uma lista de nós com todos os elementos com a classe .slide. Para selecionar um elemento da lista, você pega pelo índice do elemento na lista de nós. Por exemplo, para selecionar o primeiro você usa o índice [0]:

document.querySelectorAll(".slide")[0];

Você não irá mais precisar de ids, podendo até removê-los se só os estava usando para esse propósito.

No seu caso, uma função genérica que poderá ser aplicada a todos os elementos da lista:

function showStep(i) {
    console.log('Inicio o passo 0')
    slides[i].removeAttribute('hidden')
    slides[i+1].setAttribute('hidden', true)
}

Onde o parâmetro i é o índice do elemento na lista de nós. O i+1 selecionará o próximo elemento.

Ficaria assim:

let slides = document.querySelectorAll(".slide");
function initTutorial() {
    showStep(0)
}

function showStep(i) {
    console.log('Inicio o passo '+(i+1))
    slides[i].removeAttribute('hidden')
    // verifico se o próximo elemento existe
    if(i+1 < slides.length) slides[i+1].setAttribute('hidden', true)
}

Um exemplo para ilustrar:

let slides = document.querySelectorAll(".slide");
function initTutorial() {
    showStep(0)
}

function showStep(i) {
    console.log('Inicio o passo '+(i+1))
    slides[i].removeAttribute('hidden')
    // verifico se o próximo elemento existe
    if(i+1 < slides.length) slides[i+1].setAttribute('hidden', true)
}

initTutorial();
<section hidden class="slide">  
   Passo 1     
</section>

<section class="slide">      
   Passo 2
</section>
<button onclick="showStep(1)">Passo 2</button>

4
  • TOP! Muito bom! Obrigado mesmo! Eu preciso aprender a pensar de uma forma mais dinâmica, do que a genérica! Levei quase 300 linhas de códigos para fazer somente isso! Commented 11/07/2018 às 19:43
  • Me diga mais uma coisa.... Como faço para que, assim que eu exibir o passo 2, o passo 1 se esconda... pois sempre quando chega no ultima passo esta gerando erro. Commented 12/07/2018 às 13:53
  • Eu to no celular agora, assim q eu chegar em casa eu vejo pra vc, inclusive a questao do erro.
    – Sam
    Commented 12/07/2018 às 14:33
  • Consegui aqui.. eu tive que validar... e adicionar o i-1. slides[i - 1].setAttribute('hidden', true) e tbm acrescentei na validação do if slides[i - 1] Commented 12/07/2018 às 14:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .