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，我想显示第1个，第2个和第3个img，并通过切换CSS类来隐藏第4个img。

如何使用vanilla 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 hide类。但是如何根据输入值将类放回去？

非常感谢。

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);
  }
}

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

2 个答案: