여러 요소를 반복하고 각 요소의 가격 할인을 계산합니다.
P粉506963842
2023-09-02 17:14:31
<p>각 개별 <code><div></code>에 대한 기존 가격과 새 가격의 백분율 차이를 찾으려고 합니다. 현재 내 코드는 첫 번째 <code><div></code>의 백분율 차이만 가져오고 나머지 <code><div></code>에서 동일한 백분율 차이를 반복합니다. 첫 번째 코드를 반복하는 대신 각 개별 <code><div></code>를 대상으로 이 코드를 업데이트하는 방법을 아는 사람이 있습니까? jQuery가 필요 없는 순수 JavaScript를 사용하여 이 기능을 구현하고 싶습니다. </p>
<p>
<pre class="brush:js;toolbar:false;">const 가격차이 = () =>
const regPrice = document.querySelector('.old').innerText;
const salePrice = document.querySelector('.new').innerText;
const 가격NumReg = parsFloat(regPrice.substring(1));
const 가격NumSale = parsFloat(salePrice.substring(1));
const finalPrice = 가격NumReg - 가격NumSale;
const 백분율 = document.querySelectorAll('.percentage');
const 퍼센트 = (최종가격 / 가격NumReg) * 100;
for (i = 0; i < 백분율. 길이; i++) {
if (percentage[i].textContent.trim() === '') {
백분율[i].textContent += ' (' + rates.toFixed(0) + '% OFF)';
}
}
};
가격차이();</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="가격">
<div class="old">$12.00</div>
<div class="new">$5.00</div>
<div class="percentage"></div>
</div>
<div class="가격">
<div class="old">$18.00</div>
<div class="new">$3.00</div>
<div class="percentage"></div>
</p>
각각의 범위를 반복해야 합니다
.price
元素,而不是每个.percentage
,因为你试图执行的每个单独的计算都是基于一个单独的<div class="price">
.루프 내부(예: 현재
priceElement
(它是你的<div class="price">
요소 중 하나) 내에서 모든 계산을 수행합니다.이제
priceElement.querySelector
,而不是document.querySelector
을 사용할 수 있습니다.document.querySelector
在整个文档中找到第一个匹配的元素,而priceElement.querySelector
将在该范围内找到第一个匹配的元素:priceElement
.따라서 함수는 다음과 같습니다.
으아악이 코드는 유효지만
으아악 으아악 으아악i
的声明和innerText
vs.textContent
누락과 같은 수행해야 할 작업이 여전히 있지만 이 코드는 다음과 같이 단축될 수도 있습니다.