点击表格行切换右侧对应产品信息并添加显隐过渡的实现问题

修改说明 #

你当前的代码存在3个核心问题：

• 仅给表格第一行绑定了点击事件，其余行点击无响应
• 每次点击都会切换右侧区域的显隐状态，导致点击第二行时如果区域已显示就会被隐藏
• display属性不支持过渡动画，无法实现平滑的显隐效果

以下是完整的可运行修改代码：

HTML 代码

给行添加data-id属性用于匹配对应产品信息，其余原有结构不需要改动：

<div class="container">
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>actions</th>
        </tr>
      </thead>
      <tbody>
        <tr data-id="01">
          <td>01</td>
          <td>Acoustic Guitar</td>
          <td>[delete] [edit]</td>
        </tr>
        <tr data-id="02">
          <td>02</td>
          <td>Box of Milk</td>
          <td>[delete] [edit]</td>
        </tr>
      </tbody>
    </table>
    <br>
  </div>
  <div class="loremDiv hidden">
    <!-- 内容会通过JS动态填充 -->
  </div>
</div>

CSS 代码

调整显隐样式，支持平滑过渡动画：

.container {
  display: flex;
  gap: 20px;
}
.container > div {
  flex: 1;
}
.loremDiv {
  /* 配置过渡属性 */
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* 隐藏状态样式 */
.loremDiv.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  /* 避免隐藏状态占用布局空间 */
  height: 0;
  overflow: hidden;
}

JS 代码

重写事件绑定和内容切换逻辑：

// 配置产品信息映射表，后续新增产品直接在这里添加配置即可
const productMap = {
  '01': {
    name: 'Acoustic Guitar',
    img: '替换为吉他产品的本地/内部CDN图片地址',
    desc: '专业级民谣吉他，采用云杉实木面板，音色通透饱满，适合新手入门和进阶演奏。'
  },
  '02': {
    name: 'Box of Milk',
    img: '替换为牛奶产品的本地/内部CDN图片地址',
    desc: '全脂纯牛奶，奶源来自天然牧场，无添加，营养丰富，适合全家日常饮用。'
  }
}

// 给所有表格行绑定点击事件
document.querySelectorAll("table tbody tr").forEach(tr => {
  tr.addEventListener('click', (e) => {
    const productId = tr.dataset.id
    const productInfo = productMap[productId]
    const infoBox = document.querySelector(".loremDiv")
    
    // 动态填充产品信息
    infoBox.innerHTML = `
      <h3>${productInfo.name}</h3>
      <img src="${productInfo.img}" alt="${productInfo.name}">
      <p>${productInfo.desc}</p>
    `
    
    // 直接保持显示状态，不需要做显隐切换
    if(infoBox.classList.contains('hidden')){
      infoBox.classList.remove('hidden')
    }
  })
})

效果说明 #

• 点击任意表格行，右侧会直接显示对应产品的图片、名称和描述，不会出现隐藏后再显示的问题
• 首次点击触发展示时会有从右往左滑入的淡入效果，切换产品时内容会直接更新无闪烁
• 后续新增产品只需要在productMap里添加对应id的配置即可，不需要修改其他逻辑

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