我正在处理一个网页,该网页在同一页上有多个 (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 编码员。
要处理同一页面上的多个滑块,您可以使用类而不是 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");
您可以使用
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 -->
这样,您可以在同一页面上拥有多个滑块并独立更新它们的显示,而无需为每个滑块编写单独的代码。