如何实现多组HTML Range Slider的JS值显示复用功能？

当前你的JS代码仅对第一个滑块生效，原因是querySelector只会获取匹配到的第一个元素。要让逻辑复用在20个同类滑块上，只需通过遍历每个滑块容器，为每个滑块单独绑定事件即可：

修改后的JS代码 #

// 获取所有包含滑块的容器
const rangeContainers = document.querySelectorAll('.range');

// 遍历每个容器，为内部的滑块绑定事件
rangeContainers.forEach(container => {
  // 在当前容器内查找对应的数值显示span和滑块input
  const slideValue = container.querySelector('.sliderValue span');
  const inputSlider = container.querySelector('input[type="range"]');

  // 滑块输入时更新数值显示
  inputSlider.addEventListener('input', () => {
    const value = inputSlider.value;
    slideValue.textContent = value;
    slideValue.style.left = (value / 0.1) + '%';
    slideValue.classList.add('show');
  });

  // 滑块失去焦点时隐藏数值显示
  inputSlider.addEventListener('blur', () => {
    slideValue.classList.remove('show');
  });
});

核心思路 #

1. 用querySelectorAll('.range')获取所有滑块的父容器，你的HTML结构已经满足每个滑块都在独立的.range容器内的要求
2. 遍历每个容器，在容器内部查找对应的span和input元素——这样每个滑块的事件只会操作自己对应的数值显示，不会影响其他滑块
3. 用addEventListener替代直接赋值oninput/onblur，这种方式更灵活，也避免覆盖事件绑定

HTML结构说明 #

保持你现有的HTML结构即可，每个滑块模块遵循如下结构：

<div class="itemstatement">A*. 问题文本</div>
<div class="range">
  <div class="sliderValue"><span>0</span></div>
  <div class="field">
    <div class="value left">0</div>
    <input type="range" id="A*" name="A*" min="0" max="10" value="0" step="1">
    <div class="value right">10</div>
  </div>
</div>

只要每个滑块都包裹在.range容器中，上述JS代码就能自动作用于所有20个滑块。

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