顯示/隱藏DOM元素

Question

我有4個孩子像這樣的HTML DOM元素：

<div id="container> 
    <img class="hide> 
    <img class="hide> 
    <img class="hide> 
    <img class="hide> 
</div> 

我有一個這樣的輸入範圍的元素：

<input id="input_range type="range" min="1" max="4" value="1"> 

我根據輸入範圍值想要顯示/隱藏img元素。

例如：如果輸入值當前是3，我想通過切換CSS類來顯示第一個，第二個和第三個img，並隱藏第四個img。

如何做到這一點與香草的Javascript？

這裏是我當前的腳本：

var input_range = document.getElementById('input_range'); 
var scene = document.getElementById('container'); 

input_range.addEventListener('input', function(){ 
    hideElements(container, this.value); 
}) 

function hideElements(parent_element, number_of_children){ 
    var children = parent_element.children; 
    for (left = 0; left < number_of_children; ++left) { 
     children[left].classList.remove('hide'); 
    } 

} 

此代碼去除CSS隱藏類。但是如何根據輸入值將課程退回？

非常感謝。

Answer 1

你能像這樣工作

var input_range = document.getElementById('input_range'); 
var scene = document.getElementById('container'); 

input_range.addEventListener('input', function(){ 
    hideElements(container, this.value); 
}) 

function hideElements(parent_element, number_of_children){ 
    var children = parent_element.children; 
    for (left = 0; left < children.length; ++left) { 
     if (left < number_of_children) { 
      children[left].classList.remove('hide'); 
     } else { 
      children[left].classList.add('hide'); 
     } 
    } 

} 

Answer 2

下面是一個使用自定義的原型另一種方式：http://codepen.io/anon/pen/mmbeWw

請注意，我用的div而不只是這樣我就可以顯示輸出。

HTML：

<input id="input_range" type="range" min="1" max="4" value="1"> 
<div id="container"> 
    <div class="hide">1</div> 
    <div class="hide">2</div> 
    <div class="hide">3</div> 
    <div class="hide">4</div> 
</div> 

CSS：

.hide { 
    display: none; 
} 

JS：

var input_range = document.getElementById('input_range'); 
var scene = document.getElementById('container'); 

input_range.addEventListener('input', function(){ 
    scene.elementRange(this.value, 'hide', 'show'); 
    scene.elementRange(this.value, 'show', 'hide'); 
}); 

Node.prototype.elementRange = function(range, newClass, oldClass){ 
    for (var i = 0; i < this.children.length; i++) { 
    this.children[i].classList.add(oldClass); 
    } 

    for (var i = 0; i < range; i++) { 
    this.children[i].classList.remove(oldClass); 
    this.children[i].classList.add(newClass); 
    } 
}