根据输入范围值显示/隐藏 DOM 元素答案

【问题标题】：Show/hide DOM elements according to input range value根据输入范围值显示/隐藏 DOM 元素
【发布时间】：2017-04-11 04:47:53
【问题描述】：

我有一个带有 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，我想显示第一个、第二个和第三个img，并通过切换 CSS 类隐藏第四个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 隐藏类。但是如何根据输入的值把类放回去呢？

非常感谢。

【问题讨论】：

你的脚本怎么样？
我编辑了我的第一篇文章并添加了我当前的脚本。
如果能把代码加成js sn-p就好了

标签： javascript html dom input

【解决方案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');
        }
    }

}

【讨论】：

【解决方案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);
  }
}

【讨论】：