複数の要素をループし、各要素の価格割引を計算します

Question

<p>個々の <code><div></code> ごとに、古い価格と新しい価格の差のパーセンテージを見つけようとしています。現在、私のコードは最初の <code><div></code> のパーセンテージの差のみを取得し、同じパーセンテージの差を残りの <code><div></code> ;middle にループします。最初のコードをループするのではなく、個々の <code><div></code> をターゲットにするようにこのコードを更新する方法を知っている人はいますか? jQuery を必要とせず、純粋な JavaScript を使用してこの機能を実装したいと考えています。 </p> <p> <pre class="brush:js;toolbar:false;">constpriceDifference = () => { 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 = 価格NumReg - 価格NumSale; constパーセント = document.querySelectorAll('.percentage'); const パーセント = (最終価格 / 価格番号登録) * 100; for (i = 0; i

P粉506963842476日前525

Answer 1

実行しようとしている個々の計算は個別の <div に基づいているため、各 .percentage ではなく、各 .price 要素をループする必要があります。 class="価格"> の範囲。

現在の priceElement (<div class="price"> 要素の 1 つ) など、ループ内ですべての計算を実行します。

document.querySelector の代わりに priceElement.querySelector を使用できるようになりました。

document.querySelector はドキュメント全体で最初に一致する要素を検索し、priceElement.querySelector は範囲 PriceElement で最初に一致する要素を検索します。

関数は次のようになります:

リーリー

このコードは

有効な ですが、i 宣言や innerText の欠落など、やるべき作業がまだいくつかあります。 textContent ただし、このコードは次のように短縮することもできます: リーリー リーリー リーリー