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

问题描述 投票:0回答:2

我正在处理一个网页,该网页在同一页上有多个 (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 编码员。

javascript input range slider
2个回答
0
投票

要处理同一页面上的多个滑块,您可以使用类而不是 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");

0
投票

您可以使用

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

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

© www.soinside.com 2019 - 2024. All rights reserved.