JS -文本输出到模态窗口

Question

> sorry for my english)

简而言之:需要在按钮被点击进入时传递文本模态窗口

嗨。我有一个产品卡，我需要使它，以便当按钮被按下时，从产品描述的信息被传输-到模态窗口。尝试通过innerHTML/outerHTML来做，但是来自一张卡片的描述被传递到所有的模态窗口。卡片中的标题可以是唯一的，在每个模态窗口中都应该有一个唯一的标题。为每张卡片创建自己的窗口-不合理，因此，请帮助))

注。这样的机制可以很容易地在jQuery中改变，像这样:

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

但是，我不想为了它而连接jQuery，所以我想在原生js中实现这个功能

顺便说一下，这里是我实现它的不成功的尝试:

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>
<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>
</div>

模态窗口:

<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>

Answer 1

您可以通过事件委托来解决这个问题。这意味着添加一个事件侦听器来侦听页面中的所有元素。在事件处理程序中，检查单击的元素是否是.catalog-item中的.button_mini。如果是，那么从catalog-item__subtitle元素中读取文本并将其设置为.modal__descr元素。

const modal = document.querySelector('#order');
const modalDescription = modal.querySelector('.modal__descr');
const overlay = document.querySelector('.overlay');
document.addEventListener('click', event => {
const isButtonMini = event.target.matches('.catalog-item .button_mini');
if (!isButtonMini) {
return;
}
// Select the .catalog-item related to the .button_mini. From there get the subtitle.
const parent = event.target.closest('.catalog-item');
const subtitle = parent.querySelector('.catalog-item__subtitle');
modalDescription.textContent = subtitle.textContent;
modal.classList.add('is-visible');
overlay.classList.add('is-visible');
});