国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

對多個元素進行循環(huán)遍歷并計算每個元素的價格折扣
P粉506963842
P粉506963842 2023-09-02 17:14:31
0
1
641
<p>我正在嘗試找到每個個體<code><div></code>的舊價格和新價格之間的百分比差異。目前,我的代碼只能獲取第一個<code><div></code>的百分比差異,并將相同的百分比差異循環(huán)到其余的<code><div></code>中。有人知道如何更新此代碼以針對每個個體<code><div></code>而不僅僅是循環(huán)第一個嗎?我想使用純JavaScript實現(xiàn)這個功能,不需要jQuery。</p> <p> <pre class="brush:js;toolbar:false;">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();</pre> <pre class="brush:html;toolbar:false;"><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></pre> </p>
P粉506963842
P粉506963842

全部回復(1)
P粉616383625

你必須循環(huán)遍歷每個.price元素,而不是每個.percentage,因為你試圖執(zhí)行的每個單獨的計算都是基于一個單獨的<div class="price">的范圍。

在循環(huán)內(nèi)部進行所有的計算,比如當前的priceElement(它是你的<div class="price">元素之一)。

現(xiàn)在你可以使用priceElement.querySelector,而不是document.querySelector。

document.querySelector在整個文檔中找到第一個匹配的元素,而priceElement.querySelector將在該范圍內(nèi)找到第一個匹配的元素:priceElement。

所以函數(shù)看起來更像這樣:

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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板