纯JavaScript实现逐个计算商品价格折扣百分比问题求助

你的问题是原代码只取第一个.price容器的价格计算折扣，然后把这个值重复应用到所有容器。要实现每个容器单独计算，核心是遍历每个价格容器，在容器内部独立获取对应元素并计算。

原代码问题分析 #

原代码用document.querySelector('.old')只会获取页面中第一个.old元素，后续计算的折扣值都是基于第一个容器的价格，自然会重复应用到所有.percentage元素。

修改后的代码 #

JavaScript 代码

const priceDifference = () => {
  // 获取所有.price容器
  const priceContainers = document.querySelectorAll('.price');
  
  // 遍历每个容器
  priceContainers.forEach(container => {
    // 在当前容器内查找对应的元素
    const regPriceEl = container.querySelector('.old');
    const salePriceEl = container.querySelector('.new');
    const percentageEl = container.querySelector('.percentage');
    
    // 检查元素是否存在，避免报错
    if (!regPriceEl || !salePriceEl || !percentageEl) return;
    
    // 提取价格数值（去掉$符号）
    const priceNumReg = parseFloat(regPriceEl.innerText.substring(1));
    const priceNumSale = parseFloat(salePriceEl.innerText.substring(1));
    
    // 确保价格是有效数字
    if (isNaN(priceNumReg) || isNaN(priceNumSale) || priceNumReg === 0) return;
    
    // 计算折扣百分比
    const discountAmount = priceNumReg - priceNumSale;
    const percent = (discountAmount / priceNumReg) * 100;
    
    // 给当前容器的百分比元素赋值（避免重复添加）
    if (percentageEl.textContent.trim() === '') {
      percentageEl.textContent = `(${percent.toFixed(0)}% OFF)`;
    }
  });
};

priceDifference();

HTML 代码（无需修改）

<div class="price">
  <div class="old">$14.00</div>
  <div class="new">$6.00</div>
  <div class="percentage"></div>
</div>

<div class="price">
  <div class="old">$12.00</div>
  <div class="new">$5.00</div>
  <div class="percentage"></div>
</div>

<div class="price">
  <div class="old">$18.00</div>
  <div class="new">$3.00</div>
  <div class="percentage"></div>
</div>

关键修改点 #

• 先获取所有.price容器，通过forEach遍历每个容器
• 在每个容器内部使用container.querySelector()获取子元素，确保只操作当前容器内的元素
• 添加了元素存在性和数值有效性检查，避免页面结构异常时出现报错
• 使用模板字符串让代码更简洁

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