求助：JavaScript实现点击商品选项将信息展示到指定蓝色区域

假设你的HTML结构大概是这样（如果和实际不符，你可以调整选择器）：

<!-- 商品列表 -->
<div class="food-list">
  <div class="food-item" data-price="3">Coke</div>
  <div class="food-item" data-price="5">Fries</div>
  <div class="food-item" data-price="8">Burger</div>
</div>

<!-- 蓝色展示区域 -->
<div class="show"></div>

你的现有JS已经完成了元素获取和事件绑定，只需要完善showplan函数即可：

// 你已有的代码部分
const foodItems = document.querySelectorAll('.food-item');
const showArea = document.querySelector('.show');

foodItems.forEach(item => {
  item.addEventListener('click', showplan);
});

// 完善后的showplan函数
function showplan(e) {
  // 获取点击的商品元素
  const clickedItem = e.target;
  // 获取商品名称（去除文本前后多余空格）
  const foodName = clickedItem.textContent.trim();
  // 从data属性读取商品价格（可根据你的实际HTML结构调整）
  const foodPrice = clickedItem.dataset.price;

  // 将信息渲染到.show区域，覆盖原有内容
  showArea.innerHTML = `
    <div class="selected-content">
      <p>选中商品：${foodName}</p>
      <p>价格：$${foodPrice}</p>
    </div>
  `;
}

适配不同HTML结构的补充： #

• 如果你的商品价格是作为商品元素的子节点存在（比如<div class="food-item">Fries <span class="price">$5</span></div>），获取价格的代码改成：

  const foodPrice = clickedItem.querySelector('.price').textContent;
  

• 如果需要保留历史选中记录（而非覆盖），可以用append替代innerHTML：

  const infoElement = document.createElement('div');
  infoElement.innerHTML = `<p>${foodName} - $${foodPrice}</p>`;
  showArea.appendChild(infoElement);
  

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