在 JavaScript 中处理多范围输入滑块的最佳方式是什么？

Question

我正在处理一个网页，该网页在同一页上有多个 (8) 输入滑块。我使用 document.getElementById 找到了一个适用于一个滑块的脚本。因为我需要所有 8 个滑块的 ID，所以我不确定如何更改此代码以容纳所有 8 个滑块。

底线，有没有办法在同一个脚本中拥有多个 ID？

这是我的 html：

<div class="range-wrap"> 
  <input id="range" type="range" name="range" min="3" max="20" value="12" step="1" class="slider">
  <p id="display" style="text-align:center;margin-top:30px;"></p>
  <p id="numVal" style="text-align:center;color:#f1f1f1;"></p> 
</div>

这是我的 JavaScript：

 var slider = document.getElementById("range");
var display = document.getElementById("display");
var getVal = slider.value;

numVal.innerHTML = getVal; // If you don't want the number to be displayed, delete this. This is to show at which number the label will change

if(getVal<7) {
  display.innerHTML = "Need Help";
}

if(getVal>=7 && getVal<=15) {
  display.innerHTML = "Mediocre";
}

if(getVal>20){
  display.innerHTML = "Doing Great";
}

slider.oninput = function() {
  numVal.innerHTML = this.value;// If you don't want the number to be displayed, delete this. This is to show at which number the label will change
  
  var getVal = this.value;
  if(getVal<5) {
    display.innerHTML = "Need Help";
  }
  
  if(getVal>=7 && getVal<=10) {
    display.innerHTML = "Mediocre";
  }
  
  if(getVal>15){
    display.innerHTML = "Doing Great";
  }
}

我尝试将 getElementById 更改为 getElementsByClassName 并为每个元素分配一个类，但它破坏了脚本。

我不是经验丰富的 JS 编码员。

Answer 1

要处理同一页面上的多个滑块，您可以使用类而不是 ID：

<div class="range-wrap">
  <input class="slider" type="range" name="range" min="3" max="20" value="12" step="1">
  <p class="display" style="text-align:center;margin-top:30px;"></p>
  <p class="numVal" style="text-align:center;color:#f1f1f1;"></p> 
</div>

之后，您可以使用

getElementsByClassName

访问所有具有

input

类的slider元素：

const sliders = document.getElementsByClassName("slider");

Answer 2

您可以使用

document.querySelectorAll

选择页面上的所有滑块，然后循环遍历它们以添加事件侦听器。这是一个如何做到这一点的例子：

var sliders = document.querySelectorAll(".slider");
  
sliders.forEach(function(slider) {
  var display = document.getElementById("display" + slider.id.slice(-1));
  var numVal = document.getElementById("numVal" + slider.id.slice(-1));

  slider.oninput = function() {
    numVal.innerHTML = this.value;
    var getVal = this.value;
    if(getVal<5) { display.innerHTML = "Need Help"; }
    if(getVal>=7 && getVal<=10) { display.innerHTML = "Mediocre"; }
    if(getVal>15){ display.innerHTML = "Doing Great"; }
  }
});

<div class="range-wrap">
  <input id="range1" type="range" name="range" min="3" max="20" value="12" step="1" class="slider">
  <p id="display1" style="text-align:center;margin-top:30px;"></p>
  <p id="numVal1" style="text-align:center;color:#f1f1f1;"></p>
</div>
<div class="range-wrap">
  <input id="range2" type="range" name="range" min="3" max="20" value="12" step="1" class="slider">
  <p id="display2" style="text-align:center;margin-top:30px;"></p>
  <p id="numVal2" style="text-align:center;color:#f1f1f1;"></p>
</div>
<!-- Add more sliders here -->

这样，您可以在同一页面上拥有多个滑块并独立更新它们的显示，而无需为每个滑块编写单独的代码。