请求协助实现进度条功能的可扩展性克隆，修复克隆后失效问题

我看了你的情况，克隆后的进度条没法正常工作，核心问题是原来的代码是针对单个实例写的，没有考虑多实例复用的逻辑——全局选择器和硬编码的元素引用会导致多个实例互相干扰，新克隆的元素也没被绑定事件和计算逻辑。咱们可以把逻辑封装成可复用的模块，让每个容器独立运行：

解决思路 #

1. 封装独立实例逻辑：把单个进度条容器的初始化、事件绑定、进度计算全部封装成函数，每个容器单独调用。
2. 相对选择器定位元素：不再使用全局的document.querySelector，而是基于当前容器查找内部元素，避免不同实例的元素混淆。
3. 批量初始化所有实例：页面加载时遍历所有进度条容器，逐个初始化。

具体代码实现 #

HTML结构（每个实例用独立容器包裹） #

<!-- 第一个实例 -->
<div class="progress-container">
  <h3>实例1</h3>
  <ul class="source-list list-a">
    <li>A项1</li>
    <li>A项2</li>
    <li>A项3</li>
  </ul>
  <ul class="source-list list-b">
    <li>B项1</li>
    <li>B项2</li>
    <li>B项3</li>
  </ul>
  <ul class="target-list list-c"></ul>
  
  <div class="progress-wrap">
    <div class="progress-bar bar-a">A类进度</div>
  </div>
  <div class="progress-wrap">
    <div class="progress-bar bar-b">B类进度</div>
  </div>
</div>

<!-- 第二个实例（克隆后的结构） -->
<div class="progress-container">
  <h3>实例2</h3>
  <ul class="source-list list-a">
    <li>A项1（克隆）</li>
    <li>A项2（克隆）</li>
    <li>A项3（克隆）</li>
  </ul>
  <ul class="source-list list-b">
    <li>B项1（克隆）</li>
    <li>B项2（克隆）</li>
    <li>B项3（克隆）</li>
  </ul>
  <ul class="target-list list-c"></ul>
  
  <div class="progress-wrap">
    <div class="progress-bar bar-a">A类进度</div>
  </div>
  <div class="progress-wrap">
    <div class="progress-bar bar-b">B类进度</div>
  </div>
</div>

CSS（保持原有样式，确保进度条正常显示） #

.progress-wrap {
  width: 200px;
  height: 20px;
  background: #eee;
  margin: 10px 0;
}
.progress-bar {
  height: 100%;
  width: 0;
  transition: width 0.3s;
}
.bar-a { background: #2196F3; }
.bar-b { background: #4CAF50; }
ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
li {
  padding: 5px;
  background: #f5f5f5;
  margin: 2px 0;
  cursor: pointer;
}

JavaScript（可复用的实例逻辑） #

// 初始化单个进度条容器的函数
function initProgressContainer(container) {
  // 仅获取当前容器内的元素，避免跨实例干扰
  const listA = container.querySelector('.list-a');
  const listB = container.querySelector('.list-b');
  const listC = container.querySelector('.list-c');
  const barA = container.querySelector('.bar-a');
  const barB = container.querySelector('.bar-b');

  // 计算并更新进度条的核心逻辑
  function updateProgress() {
    const totalSourceItems = listA.children.length + listB.children.length;
    const movedItemsA = listC.querySelectorAll('.item-from-a').length;
    const movedItemsB = listC.querySelectorAll('.item-from-b').length;

    // 避免除以0的情况
    const progressA = totalSourceItems > 0 ? (movedItemsA / totalSourceItems) * 100 : 0;
    const progressB = totalSourceItems > 0 ? (movedItemsB / totalSourceItems) * 100 : 0;

    barA.style.width = `${progressA}%`;
    barB.style.width = `${progressB}%`;
  }

  // 绑定A列表的点击事件（移动元素到目标列表）
  listA.addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
      const clonedItem = e.target.cloneNode(true);
      clonedItem.classList.add('item-from-a');
      listC.appendChild(clonedItem);
      e.target.remove();
      updateProgress();
    }
  });

  // 绑定B列表的点击事件
  listB.addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
      const clonedItem = e.target.cloneNode(true);
      clonedItem.classList.add('item-from-b');
      listC.appendChild(clonedItem);
      e.target.remove();
      updateProgress();
    }
  });

  // 页面加载时初始化进度
  updateProgress();
}

// 页面加载完成后，初始化所有进度条容器
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.progress-container').forEach(container => {
    initProgressContainer(container);
  });
});

为什么这样能解决问题？ #

• 每个容器的逻辑完全独立，操作的都是自己内部的元素，不会和其他实例冲突。
• 事件绑定和进度计算都是针对当前实例的，克隆后的新容器会被自动初始化。
• 封装后的代码更容易维护，后续再添加更多实例也只需要复制容器结构即可。

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