Durchlaufen Sie mehrere Elemente und berechnen Sie den Preisnachlass für jedes Element
P粉506963842
2023-09-02 17:14:31
<p>Ich versuche, die prozentuale Differenz zwischen dem alten Preis und dem neuen Preis für jeden einzelnen <code><div></code> zu ermitteln. Derzeit erhält mein Code nur die prozentuale Differenz des ersten <code><div></code> und führt eine Schleife mit derselben prozentualen Differenz zum verbleibenden <code><div></code> ;middle durch. Weiß jemand, wie man diesen Code so aktualisiert, dass er auf jeden einzelnen <code><div></code> abzielt, anstatt nur den ersten zu durchlaufen? Ich möchte diese Funktionalität mit reinem JavaScript implementieren, kein jQuery erforderlich. </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 Prozentsatz = document.querySelectorAll('.percentage');
const percent = (finalPrice / priceNumReg) * 100;
for (i = 0; i < Prozentsatz.Länge; i++) {
if (percentage[i].textContent.trim() === '') {
Prozentsatz[i].textContent += ' (' + Prozentsatz.toFixed(0) + '% OFF)';
}
}
};
preisDifferenz();</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>
你必须循环遍历每个
.price
元素,而不是每个.percentage
,因为你试图执行的每个单独的计算都是基于一个单独的<div class="price">
的范围。在循环内部进行所有的计算,比如当前的
priceElement
(它是你的<div class="price">
元素之一)。现在你可以使用
priceElement.querySelector
,而不是document.querySelector
。document.querySelector
在整个文档中找到第一个匹配的元素,而priceElement.querySelector
将在该范围内找到第一个匹配的元素:priceElement
。所以函数看起来更像这样:
这段代码是有效的,但仍然有一些工作需要完成,比如缺少
i
的声明和innerText
vs.textContent
,但这段代码也可以像这样缩短: