JS使用addEventListener实现点击子菜单项替换主区域内容如何实现？

实现方案 #

你只需要在现有代码的基础上，补充子菜单点击后的内容同步逻辑即可，具体修改如下：

1. 新增主展示区DOM元素获取 #

首先提前拿到需要替换内容的主展示区节点，在现有变量声明部分添加以下代码：

// 原有变量声明保留，新增以下两行
const mainCryptoImg = document.querySelector(".row-left > img");
const mainCryptoName = document.querySelector(".row-left-text h3");

2. 修改子菜单点击事件逻辑 #

在原有crypto-list的点击循环绑定逻辑中，新增内容替换的代码，修改后的完整循环逻辑如下：

for (let i = 0; i < crypto.length; i++) {
  crypto[i].addEventListener("click", function () {
    // 新增：读取当前点击子项的内容
    const selectedImg = this.querySelector(".list-image img").src;
    const selectedName = this.querySelector(".crypto-text h5").textContent;
    // 新增：同步替换主展示区内容
    mainCryptoImg.src = selectedImg;
    mainCryptoName.textContent = selectedName;

    // 原有菜单切换逻辑保留不变
    if (!menuOpen) {
      hide.classList.remove("hidden");
      menuOpen = true;
    } else {
      hide.classList.add("hidden");
      menuOpen = false;
    }
  });
}

补充说明 #

如果你的子菜单图片使用的是相对路径，直接读取src属性赋值也可以正常生效，不需要额外处理路径问题。如果后续需要同步展示加密货币全称（子项p标签内的Ether等内容），只需要按照同样的逻辑获取对应节点内容，赋值到主展示区的对应位置即可。

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