点击图片后如何获取对应卡片中img-text类元素的文本内容

需求说明 #

点击卡片中的图片时，除了将图片src传递给中间的full-img，还需要把该图片所在卡片内的.img-text段落文本，赋值给中间图片下方的.caption段落。

原代码问题 #

原JavaScript中遍历所有.img-text元素并输出内容，导致点击任意图片都会打印所有卡片的文本，无法精准获取当前点击卡片对应的文本。

原HTML结构 #

<div class="row g-0 align-items-center wow fadeInUp galle" style="margin-top: 20px;  display: flex;
    justify-content: space-around;" data-wow-delay=".25s">
      <div class="modal-img">
        <img class="full-img" src="#" alt="pop">
        <p class="caption" style="font-size: 50px;color: white;"></p>
      </div>
      <div class="card aluminiumCard" id="aluminium" style="width: 18rem;">
        <img id="imggene" src="assets\images\a.png" class="card-img-top alhigh" alt="...">
        <div class="card-body imgal">
          <p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Text 1</p>
          <p class="img-text">Text genesuis </p>
        </div>
      </div>
      <div class="card aluminiumCard" style="width: 18rem;">
        <img src="assets\images\2.png"  class="card-img-top alhigh" alt="...">
        <div class="card-body imgal">
          <p class="card-text" style="font-size: 22px; text-align: center;font-weight: bold; color: white;">Image 2</p>
          <p class="img-text">Text 2</p>
        </div>
      </div>
   </div>

原JavaScript代码 #

const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const imgText = document.querySelector(".caption");
const Tests = document.querySelectorAll(".galle .img-text");

previews.forEach(preview => {
  preview.addEventListener('click', () =>{
   modalimg.classList.add("open");
   original.classList.add("open");
   const originalSrc = preview.getAttribute('src');

  original.src = originalSrc;
    Tests.forEach(test => {
    const data = test.innerText;
    console.log(data);
   });
  
  })
})

modalimg.addEventListener('click', (e) => {
  if(e.target.classList.contains('modal-img')){
    modalimg.classList.remove('open');
   original.classList.remove("open");
  }
 })
})();

修改后的JavaScript代码 #

const modalimg = document.querySelector(".modal-img");
const previews = document.querySelectorAll(".galle img");
const original = document.querySelector(".full-img");
const caption = document.querySelector(".caption");

previews.forEach(preview => {
  preview.addEventListener('click', () =>{
    modalimg.classList.add("open");
    original.classList.add("open");
    // 更新大图src
    original.src = preview.getAttribute('src');
    
    // 找到当前点击图片所在的卡片，再获取对应的img-text文本
    const currentCard = preview.closest('.card');
    const targetText = currentCard.querySelector('.img-text').innerText;
    // 赋值给caption
    caption.innerText = targetText;
    // 控制台打印测试
    console.log(targetText);
  })
})

modalimg.addEventListener('click', (e) => {
  if(e.target.classList.contains('modal-img')){
    modalimg.classList.remove('open');
    original.classList.remove("open");
  }
})

关键修改说明 #

1. 移除了无用的Tests变量，无需提前获取所有.img-text元素
2. 利用preview.closest('.card')定位当前点击图片的最近父级卡片元素，精准锁定目标范围
3. 在当前卡片内通过querySelector('.img-text')获取对应文本元素，避免遍历所有同类别元素
4. 将获取到的文本直接赋值给.caption段落，完成需求

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