Question

我是编码新手。我已经使我的代码可以像我想要的那样工作，但是javascript有点长。我将如何简化脚本？可以给我指出一个有关如何执行此操作的教程。

我知道我正在使它变得更加复杂，然后需要全部编写出来而不是简化代码。

谢谢

请参见jsfiddle here

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");

output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}

var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");

output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

var slider3 = document.getElementById("myRange3");
var output3 = document.getElementById("demo3");

output3.innerHTML = slider.value;

slider3.oninput = function() {
  output3.innerHTML = this.value;
}

Answer 1

一个选项：

function initSlider(suffix) {
  var slider = document.getElementById('myRange' + suffix);
  var output = document.getElementById('demo' + suffix);

  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
  }
}

for (var i = 0; i < 4; i++) {
  var suffix = i == 0 ? '' : i;
  initSlider(suffix);
}

简化范围滑块的JavaScript

1 个答案: