单套列表切换逻辑正常，页面部署两套后失效的问题求助

我看了你的代码，问题主要出在重复ID的使用和全局化的元素选择/事件绑定上——浏览器里ID必须是唯一的，而且你原来的JS只会绑定第一套组件的元素，第二套自然完全不起作用。下面给你一步步的解决方案：

一、先修复HTML结构：把重复ID换成类名 #

ID在页面里只能用一次，所以把所有重复的#wrapper、#list、#description这些都改成类，每个组件用一个父容器.list-component包裹，确保每套组件独立：

<div class="list-component">
  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item1" class="item">items1</li>
        <li id="item2" class="item">items2</li>
        <li id="item3" class="item">items3</li>
        <li id="item4" class="item">items4</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>
</div>
<div class="list-component">
  <div class="wrapper">
    <div class="list">
      <ol>
        <li id="item5" class="item">items5</li>
        <li id="item6" class="item">items6</li>
        <li id="item7" class="item">items7</li>
        <li id="item8" class="item">items8</li>
      </ol>
    </div>
    <div class="image-container">
      <div class="image">
        <img src="https://semantic-ui.com/images/wireframe/image.png" alt="">
      </div>
      <div class="description">
        just a placeholder text for when nothing has been chosen.
      </div>
    </div>
  </div>
</div>

二、修改CSS：把ID选择器换成类选择器 #

对应HTML的修改，把CSS里所有#开头的选择器改成.，这样样式能正确应用到每套组件：

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* containers */
.list-component {
  margin: 20px;
}
* {
  font-family: Corbel;
}
.wrapper {
  border: 1px solid red;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.image, .description, .list {
  border: 1px solid #472836;
  box-sizing: border-box;
  margin: 5px;
}
/* list */
.list {
  width: 150px;
  height: 250px;
  background-color: #9AD2CB;
  overflow-y: auto;
  overflow-x: hidden;
}
.list ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list li {
  padding: 5px;
  transition: all .3s ease;
}
.list li:nth-child(even) {
  background-color: #91f2e6;
  width: 100%;
  height: 100%;
}
.list li:hover, .list .active {
  cursor: pointer;
  color: red;
  padding-left: 25px;
}
/* sub-container */
.image, .description {
  width: 150px;
}
.image {
  background-color: #D7EBBA;
  height: 150px;
}
.image img {
  width: 100%;
  height: 100%;
}
.description {
  background-color: #FEFFBE;
  overflow-y: auto;
  overflow-x: hidden;
  height: 95px;
}

三、重构JS代码：组件化逻辑，每套独立运行 #

原来的JS是全局绑定，只会处理第一套组件。现在改成组件化初始化，每套组件自己处理自己的事件和元素：

// 先把所有列表项的数据统一存起来，用ID当key，维护更方便
const itemDataMap = new Map([
  ['item1', { desc: 'some description for item1', img: 'https://pbs.twimg.com/profile_images/980681269859241984/-4cD6ouV_400x400.jpg' }],
  ['item2', { desc: 'some description item2', img: 'https://78.media.tumblr.com/3d4a916d45190b2a58bec61f491cdb99/tumblr_p84af9767X1qhy6c9o1_500.gif' }],
  ['item3', { desc: 'some item3', img: 'https://cdn.europosters.eu/image/1300/32201.jpg' }],
  ['item4', { desc: ' description for item4', img: 'https://www.scribblefun.com/wp-content/uploads/2018/02/Pusheen-Coloring-Images.png' }],
  ['item5', { desc: 'This item5 is cool', img: 'https://c1-zingpopculture.eb-cdn.com.au/merchandising/images/packshots/855db32a4fc24da2ba2ce821edd2a51e_Large.png' }],
  ['item6', { desc: 'item6 displays attitude', img: 'https://c1-ebgames.eb-cdn.com.au/merchandising/images/packshots/969932eb9d274a57a59daf9e75319929_Medium.png' }],
  ['item7', { desc: 'amazing item7 just breathtaking', img: 'https://images-na.ssl-images-amazon.com/images/I/81GErgo2%2B8L._SY355_.jpg' }],
  ['item8', { desc: ' item8 is an interesting conept', img: 'https://cdn.shopify.com/s/files/1/2012/3849/products/4048862.jpg?v=1505815578' }]
]);

// 初始化单个列表组件的函数，传入组件容器元素
function initListComponent(component) {
  // 获取当前组件内的所有需要用到的元素
  const items = component.querySelectorAll('.item');
  const list = component.querySelector('.list ol');
  const descArea = component.querySelector('.description');
  const image = component.querySelector('.image img');

  // 处理列表项的active样式切换
  items.forEach(item => {
    item.addEventListener('click', function() {
      // 移除当前组件内所有item的active类
      items.forEach(el => el.classList.remove('active'));
      // 给当前点击的item加上active类
      this.classList.add('active');
    });
  });

  // 处理点击列表项更新描述和图片的逻辑
  list.addEventListener('click', event => {
    // 确保点击的是item元素（即使点击到item内的子元素也能触发）
    const targetItem = event.target.closest('.item');
    if (!targetItem) return;

    const itemId = targetItem.id;
    if (itemDataMap.has(itemId)) {
      const data = itemDataMap.get(itemId);
      descArea.textContent = data.desc;
      image.src = data.img;
    }
  });
}

// 页面加载完成后，初始化所有列表组件
document.addEventListener('DOMContentLoaded', function() {
  const allComponents = document.querySelectorAll('.list-component');
  allComponents.forEach(initListComponent);
});

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

1. 避免重复ID冲突：用类名代替重复ID，每套组件的元素都能被正确选中，不会和其他组件混淆。
2. 组件独立运行：每套组件的事件和逻辑都是单独初始化的，点击第二套的列表项只会更新自己对应的描述和图片，完全不影响第一套。
3. 逻辑更可靠：原来的childNodes会包含文本节点，容易报错，现在直接遍历当前组件内的.item元素，更稳定；用closest确保点击列表项内的任何区域都能触发逻辑。

这样修改后，两套列表交互逻辑就能正常独立工作啦～

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