Estou com dificuldade de desenvolvimento quando falamos de for... O básico consigo entender agora na prática... Gente desenvolvi este código e acredito que ele possa ser reduzido para poucas linhas com for.
Repare que ele na troca do input range ele aparece botões diferentes (os determinados) e fecha as divs de botões abertos. Quando apertamos estes botões ele abre a div dele e fecha as demais.
Caso necessário disponibilizei o código simplificado que está abaixo!
Aqui começa o Js
/* Dinâmica do Input Range */
function updateTextInput(val) {
/* Para controlar os Botões */
if(val == 1){
document.getElementById('um').style.display = "block";
document.getElementById('dois').style.display = "block";
document.getElementById('tres').style.display = "none";
document.getElementById('quatro').style.display = "none";
document.getElementById('cinco').style.display = "none";
}
if(val == 2){
document.getElementById('um').style.display = "block";
document.getElementById('dois').style.display = "block";
document.getElementById('tres').style.display = "block";
document.getElementById('quatro').style.display = "none";
document.getElementById('cinco').style.display = "none";
}
if(val == 3){
document.getElementById('um').style.display = "block";
document.getElementById('dois').style.display = "block";
document.getElementById('tres').style.display = "block";
document.getElementById('quatro').style.display = "block";
document.getElementById('cinco').style.display = "none";
}
if(val == 4){
document.getElementById('um').style.display = "block";
document.getElementById('dois').style.display = "block";
document.getElementById('tres').style.display = "block";
document.getElementById('quatro').style.display = "block";
document.getElementById('cinco').style.display = "block";
}
/* Para controlar as Slide's Div */
document.getElementById('slideum').style.display = "none";
document.getElementById('slidedois').style.display = "none";
document.getElementById('slidetres').style.display = "none";
document.getElementById('slidequatro').style.display = "none";
document.getElementById('slidecinco').style.display = "none";
}
/* Dinâmica do Input Button */
function slideumf(){
document.getElementById('slideum').style.display = "block";
document.getElementById('slidedois').style.display = "none";
document.getElementById('slidetres').style.display = "none";
document.getElementById('slidequatro').style.display = "none";
document.getElementById('slidecinco').style.display = "none";
}
function slidedoisf(){
document.getElementById('slideum').style.display = "none";
document.getElementById('slidedois').style.display = "block";
document.getElementById('slidetres').style.display = "none";
document.getElementById('slidequatro').style.display = "none";
document.getElementById('slidecinco').style.display = "none";
}
function slidetresf(){
document.getElementById('slideum').style.display = "none";
document.getElementById('slidedois').style.display = "none";
document.getElementById('slidetres').style.display = "block";
document.getElementById('slidequatro').style.display = "none";
document.getElementById('slidecinco').style.display = "none";
}
function slidequatrof(){
document.getElementById('slideum').style.display = "none";
document.getElementById('slidedois').style.display = "none";
document.getElementById('slidetres').style.display = "none";
document.getElementById('slidequatro').style.display = "block";
document.getElementById('slidecinco').style.display = "none";
}
function slidecincof(){
document.getElementById('slideum').style.display = "none";
document.getElementById('slidedois').style.display = "none";
document.getElementById('slidetres').style.display = "none";
document.getElementById('slidequatro').style.display = "none";
document.getElementById('slidecinco').style.display = "block";
}
</script>
Aqui começa o CSS
/* 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;}
</style>
</head>
Aqui começa o HTML5
<input type="range" name="rangeInput" min="1" max="4" onchange="updateTextInput(this.value);">
<input id="um" type="button" value="1º Slide" onclick="slideumf()">
<div id="slideum">
<input type="range" min="1" max="5"><div id="slideum">1º Slide</div>
<input id="dois" type="button" value="2º Slide" onclick="slidedoisf()">
<div id="slidedois">2º Slide</div>
<input id="tres" type="button" value="3º Slide" onclick="slidetresf()">
<div id="slidetres">3º Slide</div>
<input id="quatro" type="button" value="4º Slide" onclick="slidequatrof()">
<div id="slidequatro">4º Slide</div>
<input id="cinco" type="button" value="5º Slide" onclick="slidecincof()">
<div id="slidecinco">5º Slide</div>
</body>
if
da primeira função e deixar as duas primeiras linhas antes dos if's.