javascript - 一页显示多种输入类型范围的值

Question

我正在尝试显示页面上每个 slider 的值，这是迄今为止我的代码:

var i = 0;
var st = 'slider';
var ot = 'output';
var s = '';
var o = '';

for (var x = 0; x < 3; x++) {
i++;
s = st+i;
o = ot+i;

	var s = document.getElementById("range"+i);
    var o = document.getElementById("limit"+i);
	o.innerHTML = s.value;
	
s.oninput = function() {
 o.innerHTML = this.value;
}

}	

<div id="slidecontainer">
			  <input type="range" min="2" max="50" value="20" class="slider" id="range1" >
 <label>You chose <span id="limit1"></span></label>
</div>

<div id="slidecontainer">
			  <input type="range" min="2" max="50" value="20" class="slider" id="range2" >
 <label>You chose <span id="limit2"></span></label>
</div>

<div id="slidecontainer">
			  <input type="range" min="2" max="50" value="20" class="slider" id="range3" >
 <label>You chose <span id="limit3"></span></label>
</div>

当我移动任何 slider 时，它仅更改最后一个值，我想分别显示每个 slider 的值。我在 JavaScript 代码中使用循环，因为我有 20 多个 slider ，并且我不想为每个 slider 编写一个函数，除非这是唯一的方法。有什么建议么？

Answer 1

您遇到的问题与变量范围有关。只有一个名为o的变量，循环的每次迭代都会更改该变量。所以当 oninput 函数的计算结果 o 等于您设置的最后一个值。 o 的当前值未“保存”在函数定义中。

参见https://www.w3schools.com/js/js_scope.asp了解更多信息。

请参阅下面的解决方案，在这里我找到了每次调用函数时的限制。

function updateLabel() {
  var limit = this.parentElement.getElementsByClassName("limit")[0];
  limit.innerHTML = this.value;
}

var slideContainers = document.getElementsByClassName("slidecontainer");

for (var i = 0; i < slideContainers.length; i++) {
  var slider = slideContainers[i].getElementsByClassName("slider")[0];
  updateLabel.call(slider);
  slider.oninput = updateLabel;
}

<div class="slidecontainer">
  <input type="range" min="2" max="50" value="20" class="slider">
  <label>You chose <span class="limit"></span></label>
</div>

<div class="slidecontainer">
  <input type="range" min="2" max="50" value="20" class="slider">
  <label>You chose <span class="limit"></span></label>
</div>

<div class="slidecontainer">
  <input type="range" min="2" max="50" value="20" class="slider">
  <label>You chose <span class="limit"></span></label>
</div>