Skip to main content
adicionou 857 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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ê opega 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>

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ê o í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>

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>

adicionou 857 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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ê o í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 0''+(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>

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ê o í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 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 0')
    slides[i].removeAttribute('hidden')
    slides[i+1].setAttribute('hidden', true)
}

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ê o í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>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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ê o í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 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 0')
    slides[i].removeAttribute('hidden')
    slides[i+1].setAttribute('hidden', true)
}