原生JS实现点击按钮将商品卡片信息传入模态窗的问题

问题背景 #

我有商品卡片组件，需要实现点击卡片上的Buy按钮时，将对应卡片的商品标题信息传入模态窗口。尝试用innerHTML/outerHTML实现时，所有模态窗口都显示同一张卡片标题。每张卡片标题唯一，每个模态窗口应显示对应标题，不想为每张卡片单独创建模态窗口，希望用原生JavaScript实现（不想引入jQuery）。

参考：可行的jQuery实现 #

$('.button_mini').each(function(i)) {
 $(this).on('click', function() {
  $('#order .modal_descr').text($('.catalog-item__subtitle').eq(i).text());
 })}

我的失败尝试代码 #

document.querySelectorAll(".button_mini").forEach(item => {
      item.addEventListener('click', function () {
          document.querySelector('.overlay').classList.add('is-visible');
          document.querySelector("#order").classList.add('is-visible');
          document.querySelector('.modal__descr').outerHTML = (document.querySelector('.catalog-item__subtitle').item.outerHTML);
      });
  });

HTML结构 #

商品卡片 #

<div class="catalog-item">
   <div class="catalog-item__wrapper">
     <div class="catalog-item__content">
       <img src="" alt="" class="catalog-item__img">
          <div class="catalog-item__subtitle">Watches</div>
          <div class="catalog-item__descr">description</div>
      </div>
    </div>
  <button data-modal="order" class="button button_mini">Buy</button>
</div>
<div class="catalog-item">
  <div class="catalog-item__wrapper">
     <div class="catalog-item__content">
        <img src="" alt="" class="catalog-item__img">
           <div class="catalog-item__subtitle">Shoes</div>
           <div class="catalog-item__descr">description</div>
     </div>
   </div>
   <button data-modal="order" class="button button_mini">Buy</button>
</div>

（注：原HTML中按钮的-data-modal为笔误，已修正为data-modal）

模态窗口 #

<div class="modal" id="order">
        <div class="modal__close">&times;</div>
        <div class="modal__subtitle">Your order:</div>
        <div class="modal__descr">Descr/Title from card</div>
</div>

解决方案 #

你的失败代码问题在于：每次点击都用document.querySelector('.catalog-item__subtitle')获取页面中第一个符合选择器的元素，导致所有按钮点击都显示同一个标题；另外document.querySelector('.catalog-item__subtitle').item.outerHTML的写法也存在错误。

正确思路是：点击按钮时，先找到当前按钮所在的商品卡片容器，再在容器内定位对应标题，最后将标题内容赋值给模态窗口。

实现代码如下：

// 获取所有Buy按钮
const buyButtons = document.querySelectorAll(".button_mini");
// 获取模态窗口的描述元素
const modalDescr = document.querySelector('.modal__descr');
// 获取遮罩层和模态窗口
const overlay = document.querySelector('.overlay');
const orderModal = document.querySelector("#order");

buyButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 显示遮罩和模态窗口
    overlay.classList.add('is-visible');
    orderModal.classList.add('is-visible');
    
    // 找到当前按钮所在的商品卡片容器
    const catalogItem = this.closest('.catalog-item');
    // 在容器内找到标题元素
    const itemTitle = catalogItem.querySelector('.catalog-item__subtitle');
    // 将标题文本赋值给模态窗口的描述
    modalDescr.textContent = itemTitle.textContent;
  });
});

代码说明 #

• closest('.catalog-item')：从点击的按钮向上查找最近的父级catalog-item容器，确保获取当前按钮对应的卡片。
• 容器内用querySelector定位标题，避免拿到其他卡片的内容。
• textContent用于设置纯文本内容，比innerHTML更安全，适合当前场景。

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