여러 요소를 반복하고 각 요소의 가격 할인을 계산합니다.

Question

각 개별

에 대한 기존 가격과 새 가격의 백분율 차이를 찾으려고 합니다. 현재 내 코드는 첫 번째

의 백분율 차이만 가져오고 나머지

에서 동일한 백분율 차이를 반복합니다. 첫 번째 코드를 반복하는 대신 각 개별

를 대상으로 이 코드를 업데이트하는 방법을 아는 사람이 있습니까? jQuery가 필요 없는 순수 JavaScript를 사용하여 이 기능을 구현하고 싶습니다.

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

가격차이();

  
$14.00
  
$6.00
  




  
$12.00
  
$5.00
  




  
$18.00
  
$3.00
  

Answer 1

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

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

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

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

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

으아악

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

으아악 으아악 으아악