Gelung melalui berbilang elemen dan hitung diskaun harga untuk setiap elemen
P粉506963842
P粉506963842 2023-09-02 17:14:31
0
1
486
<p>Saya cuba mencari perbezaan peratusan antara harga lama dan harga baharu untuk setiap individu <code><div></code>. Pada masa ini, kod saya hanya mendapat perbezaan peratusan daripada <code><div></code> dan menggelungkan perbezaan peratusan yang sama kepada <code><div></code> ;tengah. Adakah sesiapa tahu cara mengemas kini kod ini untuk menyasarkan setiap individu <kod><div></code> Saya ingin melaksanakan fungsi ini menggunakan JavaScript tulen, tiada jQuery diperlukan. </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; peratusan const = document.querySelectorAll('.percentage'); peratus const = (Harga akhir / hargaNumReg) * 100; untuk (i = 0; i < peratusan.panjang; i++) { jika (peratusan[i].textContent.trim() === '') { peratusan[i].teksKandungan += ' (' + 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="peratusan"></div> </div> <div class="price"> <div class="old">$12.00</div> <div class="new">$5.00</div> <div class="peratusan"></div> </div> <div class="price"> <div class="old">$18.00</div> <div class="new">$3.00</div> <div class="peratusan"></div> </div></pre> </p>
P粉506963842
P粉506963842

membalas semua(1)
P粉616383625

Anda perlu mengulangi julat setiap .price元素,而不是每个.percentage,因为你试图执行的每个单独的计算都是基于一个单独的<div class="price">.

Adakah semua pengiraan di dalam gelung, iaitu salah satu daripada priceElement(它是你的<div class="price">elemen semasa).

Kini anda boleh menggunakan priceElement.querySelector,而不是document.querySelector.

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

Jadi fungsinya kelihatan lebih seperti ini:

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

Kod ini sah, tetapi masih ada beberapa kerja yang perlu dilakukan, seperti tiada i的声明和innerText vs. textContent, tetapi kod ini juga boleh dipendekkan seperti ini:

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!