避免跨父div计算商品总价：实现脚本仅作用于单个产品容器

问题核心 #

当前脚本使用全局变量存储sizePrice、qualityPrice、colorPrice，且baseprice写死为固定值，导致多产品页面中，操作一个产品的选项时，全局变量会被修改，进而影响其他产品的总价计算。同时，计算逻辑没有完全绑定到当前产品的容器内，导致状态混乱。

最佳实践方案 #

要实现每个产品的独立计算，核心是让每个产品的状态和计算逻辑完全隔离，具体步骤如下：

• 移除全局状态变量：将每个产品的选项价格、基础价等状态，存储在对应产品容器的作用域内，避免全局污染。
• 从当前容器获取基础价：不要写死baseprice，而是从当前产品的容器属性或初始价格元素读取，保证每个产品可以拥有独立基础价。
• 绑定事件时锁定当前容器：点击选项按钮时，先找到所属的.single-product-items容器，后续所有操作都基于这个容器内的元素。
• 实时获取当前容器的已选值：每次计算总价时，从当前容器内获取各选项的选中值（给选中按钮加active类标记），而非依赖全局变量。

修改后的代码 #

HTML（优化添加data属性存储基础价） #

<div>
  <div class="single-product-items" data-base-price="350">
    <div>
      <h5><a>Product 1</a></h5>
      <span class="current-price">350</span>
    </div>
    <div class="varSelectorBtns">
      <div class="shirtColor">
        <button value="0" class="White active"></button>
        <button value="80" class="Black"></button>
        <button value="80" class="Gray"></button>
        <button class="DarkGray" value="10"></button>
        <button value="80" class="NavyBlue"></button>
        <button value="80" class="Red"></button>
        <button value="80" class="Yellow"></button>
        <button value="80" class="Green"></button>
        <button value="80" class="Blue"></button>
        <button class="Pink" value="30"></button>
      </div>
      <div class="shirtSize">
        <button value="0" class="active">XS</button>
        <button value="0">S</button>
        <button value="0">M</button>
        <button value="0">L</button>
        <button value="0">XL</button>
        <button value="20">XXL</button>
        <button value="30">3XL</button>
        <button value="50">5XL</button>
      </div>
      <div class="shirtQlty">
        <button value="0" class="active">Ordinary</button>
        <button value="68">Premium</button>
      </div>
      <div><button>Add To Cart</button></div>
    </div>
  </div>
  <!-- Product 2、Product 3 采用相同结构，修改data-base-price即可 -->
</div>

JavaScript #

// 使用事件委托绑定点击事件，适合大量产品场景，性能更优
$('.single-product-items').on('click', '.shirtSize button, .shirtColor button, .shirtQlty button', function() {
  // 锁定当前操作的产品容器
  const $productContainer = $(this).closest('.single-product-items');
  
  // 标记当前选项为选中状态，提升交互体验
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
  
  // 从当前容器获取所有必要价格数据
  const basePrice = parseInt($productContainer.data('base-price'));
  const colorPrice = parseInt($productContainer.find('.shirtColor button.active').val());
  const sizePrice = parseInt($productContainer.find('.shirtSize button.active').val());
  const qualityPrice = parseInt($productContainer.find('.shirtQlty button.active').val());
  
  // 计算并更新当前产品的总价
  const subtotal = basePrice + colorPrice + sizePrice + qualityPrice;
  $productContainer.find('.current-price').text(subtotal);
});

方案优势 #

• 完全隔离状态：每个产品的计算都基于自身容器内的数据，不会互相干扰。
• 性能更优：事件委托避免给每个按钮单独绑定事件，适配50+产品的场景。
• 可维护性强：逻辑集中，后续修改选项类型或计算规则时只需调整一处代码。
• 灵活性高：基础价通过data属性存储，每个产品可设置独立初始价格，无需修改JS。

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