Skip to main content
adicionou 609 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Explicação:

A ideia é colocar os elementos em questão em memória. slides e slideTexts é isso mesmo, arrais com ponteiros para os elementos.

Quando onSliderChange fôr chamado, percorre todos os slides e compara o index (i) com o val que lhe é passado. Depois chama toggleSlidetext sem nenhum valor, para esconder todos.

A lógica de toggleSlidetext é semelhante. Percorre todos os elementos e compara se o div a ser iterado é o mesmo que which. Também podiamos comparar assim:

div.style.display = div.id == id ? 'block' : 'none';

e dispensar a lógica do which.

Exemplo: https://jsfiddle.net/un3gkrvv/

Explicação:

A ideia é colocar os elementos em questão em memória. slides e slideTexts é isso mesmo, arrais com ponteiros para os elementos.

Quando onSliderChange fôr chamado, percorre todos os slides e compara o index (i) com o val que lhe é passado. Depois chama toggleSlidetext sem nenhum valor, para esconder todos.

A lógica de toggleSlidetext é semelhante. Percorre todos os elementos e compara se o div a ser iterado é o mesmo que which. Também podiamos comparar assim:

div.style.display = div.id == id ? 'block' : 'none';

e dispensar a lógica do which.

Exemplo: https://jsfiddle.net/un3gkrvv/

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Esse código pode ser muito reduzido... tem imensa repetição aí.

Sugestão (com ligeiras modificações no HTML -> ver exemplo em baixo):

var slides = Array.from(document.querySelectorAll('input[type="button"]'));
var slideTexts = Array.from(document.querySelectorAll('div'));

/* Dinâmica do Input Range */
function onSliderChange(val) {
    slides.forEach(function(slide, i) {
        slide.style.display = i <= val ? 'block' : 'none';
    });
    toggleSlidetext();
}

function toggleSlidetext(id) {
    var which = document.getElementById(id);
    slideTexts.forEach(function(div) {
        div.style.display = div == which ? 'block' : 'none';
    });
}

Exemplo: https://jsfiddle.net/un3gkrvv/

var slides = Array.from(document.querySelectorAll('input[type="button"]'));
var slideTexts = Array.from(document.querySelectorAll('div'));

/* Dinâmica do Input Range */
function onSliderChange(val) {
    slides.forEach(function(slide, i) {
        slide.style.display = i <= val ? 'block' : 'none';
    });
    toggleSlidetext();
}

function toggleSlidetext(id) {
    var which = document.getElementById(id);
    slideTexts.forEach(function(div) {
        div.style.display = div == which ? 'block' : 'none';
    });
}
/* Style Inicial dos Inputs Button */

#um {
    display: none;
}

#dois {
    display: none;
}

#tres {
    display: none;
}

#quatro {
    display: none;
}

#cinco {
    display: none;
}


/* Style Inicial das Div's dos Slides */

#slideum {
    display: none;
}

#slidedois {
    display: none;
}

#slidetres {
    display: none;
}

#slidequatro {
    display: none;
}

#slidecinco {
    display: none;
}
<input type="range" name="rangeInput" min="1" max="4" onchange="onSliderChange(this.value);">
<input id="um" type="button" value="1º Slide" onclick="toggleSlidetext('slideum')">
<div id="slideum">1º Slide</div>
<input id="dois" type="button" value="2º Slide" onclick="toggleSlidetext('slidedois')">
<div id="slidedois">2º Slide</div>
<input id="tres" type="button" value="3º Slide" onclick="toggleSlidetext('slidetres')">
<div id="slidetres">3º Slide</div>
<input id="quatro" type="button" value="4º Slide" onclick="toggleSlidetext('slidequatro')">
<div id="slidequatro">4º Slide</div>
<input id="cinco" type="button" value="5º Slide" onclick="toggleSlidetext('slidecinco')">
<div id="slidecinco">5º Slide</div>