여러 요소를 반복하고 각 요소의 가격 할인을 계산합니다.
P粉506963842
P粉506963842 2023-09-02 17:14:31
0
1
521
<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>
P粉506963842
P粉506963842

모든 응답(1)
P粉616383625

각각의 범위를 반복해야 합니다 .price元素,而不是每个.percentage,因为你试图执行的每个单独的计算都是基于一个单独的<div class="price">.

루프 내부(예: 현재 priceElement(它是你的<div class="price">요소 중 하나) 내에서 모든 계산을 수행합니다.

이제 priceElement.querySelector,而不是document.querySelector을 사용할 수 있습니다.

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

따라서 함수는 다음과 같습니다.

으아악

이 코드는 유효지만 i的声明和innerText vs. textContent 누락과 같은 수행해야 할 작업이 여전히 있지만 이 코드는 다음과 같이 단축될 수도 있습니다.

으아악 으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿