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 id
s, 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>