首先让我给你看一张图片以便更好地理解：
当我单击快速查看按钮时，会出现一个弹出窗口，我想让这个动态的意思是，如果我单击一个项目，img 应该根据单击的项目而改变。
然后是第二个功能，它基本上应该根据项目描述更改弹出窗口项目“标题”名称、“价格”和“文本”（如果可能）。这是弹出窗口的图像：
第二张图片说明我点击了第一个项目，但如果我点击第二个（或任何其他项目），名称、价格和描述应该会随着图片而改变。我想改变图像的功能可能没有那么复杂，但是当涉及到第二个功能时，我根本不知道如何实现这一点，我不想认为我必须构建一个不同的弹出窗口我的每个元素的 html 结构。
<main>
<section class="products-container container">
<nav class="categories">
<span class="categories__link" id="accesories">Accesories</span>
<span class="categories__link">Bottoms</span>
<span class="categories__link">Dresses + Jumpsuits</span>
<span class="categories__link">Outerwear</span>
<span class="categories__link">Tops</span>
<span class="categories__link">— Sale</span>
</nav>
<div class="products">
<a href="#" class="shop-item">
<img src="img/haori-jacket.jpg" alt="Haori Jacket" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">Haori jacket<br><span class="quickview__info--price">$210.00</span></span>
</div>
</a>
<a href="#" class="shop-item">
<img src="img/swing-dress.jpg" alt="Swing Dress" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">Swing dress<br><span class="quickview__info--price">$218.00</span></span>
</div>
</a>
<a href="#" class="shop-item">
<img src="img/linen-top.jpg" alt="Linen Top" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">Linen top<br><span class="quickview__info--price">$125.00</span></span>
</div>
</a>
<a href="#" class="shop-item">
<img src="img/lounge-jumpsuit.jpg" alt="Lounge Jumpsuit" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">Lounge Jumpsuit<br><span class="quickview__info--price">$298.00</span></span>
</div>
</a>
<a href="#" class="shop-item">
<img src="img/lounge-tunic.jpg" alt="Lounge Tunic" class="shop-item__img">
<div class="quickview">
<span class="quickview__icon">Quick View</span>
<span class="quickview__info">Lounge Tunic<br><span class="quickview__info--price">$258.00</span></span>
</div>
</a>
</div>
</section>
<!-- Popup Shop Item -->
<div class="popup-item">
<div class="wrapper-item">
<img src="img/haori-jacket.jpg" alt="Haori jacket" class="wrapper-item__img">
<div class="product-info">
<h2 class="heading-secondary">Haori jacket</h2>
<span class="product-info__price">$210.00</span>
<p class="product-info__text">Sed ornare tellus non lectus blandit faucibus. Curabitur convallis nibh ut libero lobortis ullamcorper. Aliquam ornare risus in orci iaculis egestas. Vivamus varius ipsum eu leo ...</p>
<div class="detail-group">
<p class="detail-group__span">Size:</p>
<select class="detail-group__size">
<option value="">Select Size</option>
<option value="0">0</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
</div>
<div class="detail-group">
<p class="detail-group__span">Quantity:</p>
<input class="detail-group__quantity" max="9999" min="1" value="1" type="number">
</div>
<button type="button" class="btn btn--form btn--form--shop">Add to cart</button>
<a href="" class="btn-view">View Full Item</a>
</div>
</div>
<span class="popup__close-icon" id="closeIcon">×</span>
</div>
</main>
Javascript 打开弹出窗口
// Open popup shop item
$('.quickview__icon').click(function (){
$('footer').css('display', 'none');
$('.popup-item').css({'opacity': '1', 'visibility': 'visible'});
// Change popup shop item img source
});