Question

我正在尝试显示我页面上每个滑块的值，这是我目前的代码：

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>

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

Answer 1

您遇到的问题与变量范围有关。只有一个名为o的变量，循环的每次迭代都会更改此变量。所以当 oninput函数被评估o等于您将其设置为相等的最后一个值。 o的当前值未被＆＃34;保存＆＃34;在函数定义中。

有关详细信息，请参阅https://www.w3schools.com/js/js_scope.asp。

请参阅下面的解决方案，此处我在每个函数调用中找到limit。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在一个页面中显示多个输入类型范围的值

1 个答案: