Bootstrap范围滑块JS改造：从getElementById改为getElementsByClassName

没问题！我帮你把单滑块的逻辑改成支持多滑块的版本，用document.getElementsByClassName来处理所有同类型的滑块，确保每个滑块都能独立显示自己的百分比值。

第一步：调整HTML结构（示例） #

首先确保每个滑块和对应的百分比显示元素是配对的，比如用父容器包裹，或者让它们相邻：

<!-- 滑块组1 -->
<div class="slider-wrapper">
  <input type="range" class="form-range myRange" min="0" max="100" value="50">
  <span class="percent">50%</span>
</div>

<!-- 滑块组2 -->
<div class="slider-wrapper">
  <input type="range" class="form-range myRange" min="0" max="100" value="20">
  <span class="percent">20%</span>
</div>

第二步：修改JavaScript代码 #

我们需要遍历所有带myRange类的滑块，给每个滑块绑定事件，并关联对应的百分比显示元素：

// 获取所有滑块元素（返回HTMLCollection）
const sliders = document.getElementsByClassName("myRange");

// 遍历每个滑块，初始化并绑定事件
for (let i = 0; i < sliders.length; i++) {
  const slider = sliders[i];
  // 找到当前滑块对应的百分比显示元素——这里用父容器查找更稳妥
  const output = slider.closest('.slider-wrapper').querySelector('.percent');
  
  // 初始化显示默认值（加上%符号）
  output.textContent = `${slider.value}%`;
  
  // 绑定滑块输入事件，实时更新百分比
  slider.addEventListener('input', function() {
    output.textContent = `${this.value}%`;
  });
}

关键说明 #

• 遍历滑块集合：getElementsByClassName返回的是动态HTMLCollection，所以用for循环遍历最直接，也可以转成数组用forEach：Array.from(sliders).forEach(slider => { ... })
• 关联对应输出元素：用closest('.slider-wrapper')找到父容器，再通过querySelector('.percent')定位到当前滑块的专属显示元素，这样就算HTML结构调整，只要父容器类名不变就不会出错
• 百分比格式：初始化和事件触发时都给值加上%符号，符合需求

这样所有带myRange类的Bootstrap滑块都会自动同步显示对应的百分比啦～

内容的提问来源于stack exchange，提问作者user8970374