Parcourez plusieurs éléments et calculez la remise de prix pour chaque élément

Question

J'essaie de trouver la différence en pourcentage entre l'ancien prix et le nouveau prix pour chaque

. Actuellement, mon code n'obtient que la différence en pourcentage du premier

et boucle la même différence en pourcentage avec le

;milieu restant. Quelqu'un sait-il comment mettre à jour ce code pour cibler chaque

au lieu de simplement parcourir le premier ? Je souhaite implémenter cette fonctionnalité en utilisant du JavaScript pur, aucun jQuery requis.

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 pourcentage = document.querySelectorAll('.percentage');
  const pour cent = (finalPrice / priceNumReg) * 100 ;

  pour (i = 0; i < pourcentage.longueur; i++) {
    if (percentage[i].textContent.trim() === '') {
      percent[i].textContent += ' (' + percent.toFixed(0) + '% OFF)';
    }
  }
} ;

priceDifference();

<div class="price">
  <div class="old">14,00 $</div>
  <div class="new">6,00 $</div>
  <div class="pourcentage"></div>
</div>

<div class="prix">
  <div class="old">12,00 $</div>
  <div class="nouveau">5,00 $</div>
  <div class="pourcentage"></div>
</div>

<div class="prix">
  <div class="old">18,00 $</div>
  <div class="nouveau">3,00 $</div>
  <div class="pourcentage"></div>
</div>

Answer 1

Vous devez parcourir la gamme de chacun .price元素，而不是每个.percentage，因为你试图执行的每个单独的计算都是基于一个单独的<div class="price">.

Effectue tous les calculs à l'intérieur de la boucle, c'est-à-dire l'un des priceElement（它是你的<div class="price">éléments actuels).

Vous pouvez maintenant utiliser priceElement.querySelector，而不是document.querySelector.

document.querySelector在整个文档中找到第一个匹配的元素，而priceElement.querySelector将在该范围内找到第一个匹配的元素：priceElement.

La fonction ressemble donc davantage à ceci :

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)';
    }
  }
};

Ce code est valide, mais il y a encore du travail à faire, comme manquer i的声明和innerText vs. textContent, mais ce code peut aussi être raccourci comme ceci :

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>