如何高效管理JavaScript中的多个范围滑块输入

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

var slider = document.getElementById("range");
var display = document.getElementById("display");
var numVal = document.getElementById("numVal"); // 修正：原代码中numVal未声明

// 初始值显示逻辑
var getVal = slider.value;
if (numVal) numVal.innerHTML = getVal; 

if(display) {
    if(getVal < 7) {
        display.innerHTML = "需要帮助";
    } else if (getVal >= 7 && getVal <= 15) {
        display.innerHTML = "一般";
    } else if (getVal > 15) { // 统一逻辑
        display.innerHTML = "表现优秀";
    }
}

// 绑定输入事件
slider.oninput = function() {
  var currentVal = this.value;
  if (numVal) numVal.innerHTML = currentVal;

  if(display) {
    if(currentVal < 5) {
      display.innerHTML = "需要帮助";
    } else if (currentVal >= 5 && currentVal <= 10) { // 调整范围以覆盖所有情况
      display.innerHTML = "一般";
    } else if (currentVal > 10 && currentVal <= 15) {
      display.innerHTML = "良好"; // 新增类别
    } else if (currentVal > 15){
      display.innerHTML = "表现优秀";
    }
  }
};
// 确保页面加载时也执行一次更新
slider.oninput();

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

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

<!-- 更多滑块组件... -->
<div class="range-wrap">
  <input class="slider-input" type="range" name="range3" min="1" max="10" value="5" step="1">
  <p class="slider-display" style="text-align:center;margin-top:30px;"></p>
  <p class="slider-num-val" style="text-align:center;color:#f1f1f1;"></p> 
</div>

document.addEventListener('DOMContentLoaded', () => { // 确保DOM加载完成后再执行脚本
    const allSliders = document.getElementsByClassName("slider-input");

    // 遍历所有滑块元素
    Array.from(allSliders).forEach(slider => {
        // 对于每个滑块，找到其父容器（.range-wrap）
        const rangeWrap = slider.closest('.range-wrap'); 
        if (!rangeWrap) {
            console.warn("滑块的父容器 '.range-wrap' 未找到，跳过此滑块。");
            return;
        }

        // 在当前滑块的父容器内查找对应的显示元素
        const display = rangeWrap.querySelector('.slider-display');
        const numVal = rangeWrap.querySelector('.slider-num-val');

        // 定义滑块值更新函数，封装逻辑
        const updateSliderDisplay = (currentVal) => {
            if (numVal) {
                numVal.innerHTML = currentVal;
            }

            if (display) {
                // 根据滑块值更新状态文本
                if (currentVal < 5) {
                    display.innerHTML = "需要帮助";
                } else if (currentVal >= 5 && currentVal <= 10) {
                    display.innerHTML = "一般";
                } else if (currentVal > 10 && currentVal <= 15) {
                    display.innerHTML = "良好";
                } else if (currentVal > 15) {
                    display.innerHTML = "表现优秀";
                }
            }
        };

        // 绑定输入事件
        slider.oninput = function() {
            updateSliderDisplay(this.value);
        };

        // 页面加载时，为每个滑块设置初始显示状态
        updateSliderDisplay(slider.value);
    });
});