如何为商品页实现产品专属的HTML Lightbox详情弹窗

问题背景 #

正在为学校项目开发商品页面，需要实现点击产品查看对应详情的功能。参考现有实现后，所有产品点击后弹出的都是同一个Lightbox内容，添加多个Lightbox也无效果，推测是JavaScript逻辑问题，目前尚未掌握JS基础知识。

解决方案 #

核心问题分析 #

现有代码仅更新了弹窗中的图片，标题、价格、描述等其他信息未同步对应产品数据；同时价格计算时默认取页面第一个.product-price元素的值，导致所有产品弹窗的价格逻辑一致。

步骤1：为列表产品补充完整数据 #

给每个列表中的产品添加品牌、描述、评分等信息，通过item-data属性绑定产品ID，确保数据可被JS精准获取：

<div class="itemlist-item-wrapper" onclick="OpenProduct(1);">
  <div class="product-details">
    <div>
      <div class="product-info">
        <div class="product-manufacturer" item-data="1">NOOK</div>
        <div class="product-title" item-data="1">LOUNGE CHAIR</div>
        <div class="product-price" price-data="320.03" item-data="1">
          $320<span class="product-price-cents">03</span>
        </div>
        <div class="product-description" item-data="1">Designer Karim Rashid continues to put his signature spin on all genres of design through various collaborations with top-notch companies. Another one to add to the win column is his work with Italian manufacturer Chateau d’Ax.</div>
        <div class="product-rating-group" item-data="1">
          <span class="rating-stars">★★★☆☆</span>
          <span class="rating-text">(3.1 - 1203 reviews)</span>
        </div>
      </div>
      <div class="product-image" item-data="1">
        <img src="https://via.placeholder.com/300" />
      </div>
    </div>
  </div>
</div>
<!-- 其他产品同理，修改item-data值并补充对应专属数据 -->

步骤2：修改OpenProduct函数，同步所有弹窗内容 #

更新函数逻辑，获取点击产品的所有数据并替换弹窗中的对应内容：

function OpenProduct(itemId){
  // 获取当前点击产品的所有数据
  const manufacturer = $('.product-manufacturer[item-data="'+itemId+'"]').text();
  const title = $('.product-title[item-data="'+itemId+'"]').text();
  const price = $('.product-price[item-data="'+itemId+'"]').attr("price-data");
  const description = $('.product-description[item-data="'+itemId+'"]').text();
  const ratingStars = $('.product-rating-group[item-data="'+itemId+'"] .rating-stars').text();
  const ratingText = $('.product-rating-group[item-data="'+itemId+'"] .rating-text').text();
  const imgSrc = $('.product-image[item-data="'+itemId+'"] img').attr("src");

  // 更新弹窗内的品牌、标题
  $('.lightbox-blanket .product-manufacturer').text(manufacturer);
  $('.lightbox-blanket .product-title').text(title);

  // 更新价格数据与显示格式
  $('.lightbox-blanket .product-price').attr("price-data", price);
  const priceSplit = price.split('.');
  $('.lightbox-blanket .product-price').html(`$${priceSplit[0]}<span class="product-price-cents">${priceSplit[1]}</span>`);

  // 更新描述与评分
  $('.lightbox-blanket .product-description').text(description);
  let starHtml = '';
  for(let i=1; i<=5; i++){
    starHtml += `<i class="fa fa-star ${i<=ratingStars.split('★').length-1 ? 'rating' : ''}" star-data="${i}"></i>`;
  }
  starHtml += `<div class="product-rating-details">${ratingText}</div>`;
  $('.lightbox-blanket .product-rating').html(starHtml);

  // 更新图片
  $('.lightbox-blanket .product-image img').attr("src", imgSrc);

  // 重置数量与总价
  $("#product-quantity-input").val("0");
  CalcPrice(0);

  // 显示弹窗
  $(".lightbox-blanket").show();
}

步骤3：修复CalcPrice函数的价格获取逻辑 #

修改函数，确保从当前弹窗中获取对应产品的价格：

function CalcPrice(qty){
  // 从弹窗内获取当前产品的价格
  const price = $(".lightbox-blanket .product-price").attr("price-data");
  const total = parseFloat(price * qty).toFixed(2);
  $(".product-checkout-total-amount").text(total);
}

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