javascript - 根据输入范围值显示/隐藏 DOM 元素

Question

我有一个 HTML DOM 元素，有 4 个子元素，如下所示:

<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 类来显示第 1 个、第 2 个和第 3 个 img，并隐藏第 4 个 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');
        }
    }

}