如何无需新增函数与类实现JavaScript步骤列表循环复用？

当然可以用循环（或者更高效的事件委托）来统一处理所有步骤元素，后续新增步骤完全不用改JS代码，具体实现方法如下：

第一步：修改HTML结构 #

给所有带step01、step02这类类名的步骤元素，统一加上一个通用类（比如progress-step），同时给每个步骤加一个data-step属性标记步骤编号，比如：

<!-- 原有步骤元素 -->
<div class="step01 progress-step" data-step="1">步骤1</div>
<div class="step02 progress-step" data-step="2">步骤2</div>
<!-- 新增步骤直接复制结构改编号即可 -->
<div class="step03 progress-step" data-step="3">步骤3</div>

第二步：用循环绑定点击事件（基础版） #

通过选择器选中所有带progress-step类的元素，用forEach循环统一绑定点击事件，把原来单独写的逻辑封装进去：

// 获取所有步骤元素
const allSteps = document.querySelectorAll('.progress-step');

allSteps.forEach(step => {
  step.addEventListener('click', function() {
    // 获取当前点击的步骤编号
    const currentStep = parseInt(this.dataset.step);
    
    // 替换成你原来单独事件里的逻辑，比如更新步骤状态、进度条宽度
    // 示例逻辑：标记当前步骤为激活，之前的为完成，之后的为未开始
    allSteps.forEach((item, index) => {
      if (index < currentStep - 1) {
        item.classList.add('completed');
        item.classList.remove('active');
      } else if (index === currentStep - 1) {
        item.classList.add('active');
        item.classList.remove('completed');
      } else {
        item.classList.remove('active', 'completed');
      }
    });
    
    // 更新进度条宽度（假设进度条类为progress-bar）
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = `${((currentStep - 1) / (allSteps.length - 1)) * 100}%`;
  });
});

第三步：更推荐的事件委托方案（支持动态新增） #

如果后续可能通过JS动态添加步骤，用事件委托更合适——把点击事件绑定到步骤的父容器上，不用给每个新元素单独绑定事件：

// 找到步骤的父容器（假设父容器类为progress-container）
const progressContainer = document.querySelector('.progress-container');

progressContainer.addEventListener('click', function(e) {
  // 判断点击的是否是步骤元素
  if (e.target.classList.contains('progress-step')) {
    const currentStep = parseInt(e.target.dataset.step);
    const allSteps = progressContainer.querySelectorAll('.progress-step');
    
    // 执行步骤状态、进度条更新逻辑
    allSteps.forEach((item, index) => {
      if (index < currentStep - 1) {
        item.classList.add('completed');
        item.classList.remove('active');
      } else if (index === currentStep - 1) {
        item.classList.add('active');
        item.classList.remove('completed');
      } else {
        item.classList.remove('active', 'completed');
      }
    });
    
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = `${((currentStep - 1) / (allSteps.length - 1)) * 100}%`;
  }
});

最后 #

把原来单独写的step01、step02的点击事件代码删掉，换成上面的统一逻辑即可。之后新增步骤，只需要在HTML里添加带progress-step类和对应data-step属性的元素，JS完全不用修改。

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