對多個元素進行循環遍歷併計算每個元素的價格折扣

Question

我正在嘗試找到每個個體

的舊價格和新價格之間的百分比差異。目前，我的程式碼只能取得第一個

的百分比差異，並將相同的百分比差異循環到其餘的

;中。有人知道如何更新此程式碼以針對每個個體

而不僅僅是循環第一個嗎？我想使用純JavaScript實作這個功能，不需要jQuery。

const priceDifference = () => {
  const regPrice = document.querySelector('.old').innerText;
  const salePrice = document.querySelector('.new').innerText;

  const priceNumReg = parseFloat(regPrice.substring(1));
  const priceNumSale = parseFloat(salePrice.substring(1));
  const finalPrice = priceNumReg - priceNumSale;

  const percentage = document.querySelectorAll('.percentage');
  const percent = (finalPrice / priceNumReg) * 100;

  for (i = 0; i < percentage.length; i ) {
    if (percentage[i].textContent.trim() === '') {
      percentage[i].textContent = ' (' percent.toFixed(0) '% OFF)';
    }
  }
};

priceDifference();

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

Answer 1

你必須循環遍歷每個.price元素，而不是每個.percentage，因為你試圖執​​行的每個單獨的計算都是基於一個單獨的<div class="price">的範圍。

在循環內部進行所有的計算，例如目前的priceElement（它是你的<div class="price">元素之一）。

現在你可以使用priceElement.querySelector，而不是document.querySelector。

document.querySelector在整個文件中找到第一個符合的元素，而priceElement.querySelector將在該範圍內找到第一個符合的元素： priceElement。

所以函數看起來比較像這樣：

const priceDifference = () => {
  const price = document.querySelectorAll(".price");

  for (i = 0; i < price.length; i++) {
    const priceElement = price[i];

    const regPrice = priceElement.querySelector(".old").innerText;
    const salePrice = priceElement.querySelector(".new").innerText;
    const percentage = priceElement.querySelector(".percentage");

    const priceNumReg = parseFloat(regPrice.substring(1));
    const priceNumSale = parseFloat(salePrice.substring(1));

    const finalPrice = priceNumReg - priceNumSale;
    const percent = (finalPrice / priceNumReg) * 100;
    
    if (percentage.textContent.trim() === '') {
      percentage.textContent += ' (' + percent.toFixed(0) + '% OFF)';
    }
  }
};

這段程式碼是有效的，但仍然有一些工作需要完成，例如缺少i的聲明和innerText vs. textContent，但這段程式碼也可以這樣縮短：

const parseCurrencyValue = ({ textContent }) => Number.parseFloat(textContent.replace(/^[^-+0-9.]*/u, "")),
  priceDifference = () => Array.from(document.querySelectorAll(".price"))
  .forEach((priceElement) => {
    const [
        regularPrice,
        salePrice
      ] = [ ".old", ".new" ]
        .map((selector) => parseCurrencyValue(priceElement.querySelector(selector))),
      discount = 1 - (salePrice / regularPrice),
      percentageElement = priceElement.querySelector(".percentage");

    if (percentageElement.textContent.trim() === "") {
      percentageElement.insertAdjacentText("beforeend", ` (${Math.round(discount * 100)} % off)`);
    }
  });

priceDifference();

.percentage {
  text-transform: uppercase;
}

<div class="price">
  <div class="old">.00</div>
  <div class="new">.00</div>
  <div class="percentage"></div>
</div>

<div class="price">
  <div class="old">.00</div>
  <div class="new">.00</div>
  <div class="percentage"></div>
</div>

<div class="price">
  <div class="old">.00</div>
  <div class="new">.00</div>
  <div class="percentage"></div>
</div>