JavaScript中高效处理多个范围滑块：从ID到Class的优化实践

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

// 获取DOM元素
var slider = document.getElementById("range");
var display = document.getElementById("display");
var numVal = document.getElementById("numVal"); // 修正：原代码中numVal未通过getElementById获取

// 初始化显示
var getVal = parseInt(slider.value);
numVal.innerHTML = getVal;

if (getVal < 7) {
  display.innerHTML = "需要帮助";
} else if (getVal >= 7 && getVal <= 15) {
  display.innerHTML = "一般";
} else if (getVal > 15) { // 调整逻辑以匹配max=20
  display.innerHTML = "表现优秀";
}

// 监听滑块输入事件
slider.oninput = function() {
  var currentVal = parseInt(this.value);
  numVal.innerHTML = currentVal;

  if (currentVal < 7) {
    display.innerHTML = "需要帮助";
  } else if (currentVal >= 7 && currentVal <= 15) {
    display.innerHTML = "一般";
  } else if (currentVal > 15) { // 调整逻辑以匹配max=20
    display.innerHTML = "表现优秀";
  }
};

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

<!-- 第二个滑块组 -->
<div class="range-wrap">
  <input class="slider-input" type="range" name="slider2" min="0" max="100" value="50" step="10">
  <p class="slider-display-text" style="text-align:center;margin-top:30px;"></p>
  <p class="slider-value-display" style="text-align:center;color:#f1f1f1;"></p> 
</div>

<!-- 可以添加更多滑块组... -->

document.addEventListener('DOMContentLoaded', () => {
    // 获取所有滑块的父容器
    const sliderWraps = document.querySelectorAll('.range-wrap');

    // 遍历每个滑块容器
    sliderWraps.forEach(wrap => {
        // 在当前容器内部查找滑块和显示元素
        const slider = wrap.querySelector('.slider-input');
        const displayText = wrap.querySelector('.slider-display-text');
        const numVal = wrap.querySelector('.slider-value-display');

        // 定义一个函数来更新显示内容，提高代码复用性
        const updateSliderDisplay = (currentSlider) => {
            const getVal = parseInt(currentSlider.value);
            numVal.innerHTML = getVal; // 更新数值显示

            // 根据滑块值更新描述性文本
            if (getVal < 7) {
                displayText.innerHTML = "需要帮助";
            } else if (getVal >= 7 && getVal <= 15) {
                displayText.innerHTML = "一般";
            } else if (getVal > 15) { 
                displayText.innerHTML = "表现优秀";
            }
        };

        // 初始化每个滑块的显示
        updateSliderDisplay(slider);

        // 为每个滑块绑定 oninput 事件监听器
        slider.oninput = function() {
            updateSliderDisplay(this); // 'this' 指向当前触发事件的滑块
        };
    });
});