用js和css写的英雄联盟人物的小页面，点击每个小的头像图片出来的是同样的详情页面，求解答😭😭

<p class="md_img_container"><img class="md_img" src="" alt="img" align="left" data-id="1" /></p> 
<p></p> 
<p></p> 
<p class="md_img_container"><img class="md_img" src="" alt="img" align="left" data-id="2" /></p> 
<p></p> 

// 获取所有小头像图片的父元素
const mdImgContainer = document.getElementsByClassName('md_img_container')[0];

// 监听点击事件
mdImgContainer.addEventListener('click', (event) => {
  // 判断点击的是否为小头像图片
  if (event.target.classList.contains('md_img')) {
    // 获取点击的头像图片的标识符
    const id = event.target.getAttribute('data-id');

    // 根据标识符显示对应的详情页面
    displayDetailsPage(id);
  }
});

// 根据标识符显示对应的详情页面
function displayDetailsPage(id) {
  // 根据id进行相应的处理，例如展示对应的信息或者跳转到其他页面
  console.log("显示详情页面：" + id);
}

.details-page {
  display: none;
}

.details-page.active {
  display: block;
}

<div class="details-page" id="details-page-1">
  <h1>详情页面1</h1>
  <p>这是详情页面1的内容</p>
</div>

<div class="details-page" id="details-page-2">
  <h1>详情页面2</h1>
  <p>这是详情页面2的内容</p>
</div>

function displayDetailsPage(id) {
  // 根据id进行相应的处理，例如展示对应的信息或者跳转到其他页面

  // 先隐藏所有详情页面
  const detailsPages = document.getElementsByClassName('details-page');
  for (let i = 0; i < detailsPages.length; i++) {
    detailsPages[i].classList.remove('active');
  }

  // 根据id显示对应的详情页面
  const detailsPage = document.getElementById('details-page-' + id);
  detailsPage.classList.add('active');
}