javascript - 使用 Vanilla JS 计算产品的折扣百分比

Question

您好，我想做的是使用 Vanilla JS 计算正在销售的产品的折扣百分比。因此，如果销售价格存在“.product-price__discount”，那么我想计算出该产品的折扣百分比。

到目前为止，我已经能够计算出第一个产品的折扣。在第二个产品上，它似乎打印与第一个产品相同的折扣，并且最后一个产品没有促销，因此这是正确的，它被忽略了。我也知道 .length 有错误，但不知道如何解决它。

var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');

price.forEach(function(el){
if(!el.querySelector('.product-price__discount').length) {
    var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
    var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

    var subtractPrice = (wasPrice - newPrice);
    var dividePrice = (subtractPrice / wasPrice);
    var multiplyPrice = (dividePrice * 100);
    el.querySelector('.discountPercentage').innerHTML = multiplyPrice.toFixed(0) + "&#37";
  } 
  });

.product-price__was {
  text-decoration: line-through;
}
.product-price__discount {
  color: red;
}

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__discount">Now &euro;8,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__discount">&euro;10,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

Answer 1

问题可以在这里找到；

var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

您正在使用document.querySelector ，但是，您需要 el由 forEach 提供的元素像这样:

var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

---

此外，为了防止 length错误，检查是否querySelector通过检查null发现了任何东西，而不是 .length :

if (el.querySelector('.product-price__discount') !== null) {

---

看一下这个改进的示例:

var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');

price.forEach(function(el){
  if (el.querySelector('.product-price__discount') !== null) {
      var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
      var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;

      var discount = 100 - (newPrice / wasPrice) * 100;
      el.querySelector('.discountPercentage').innerHTML = discount.toFixed(0) + "&#37";
    } 
});

.product-price__was {
  text-decoration: line-through;
}
.product-price__discount {
  color: red;
}

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__discount">Now &euro;8,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>

<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">&euro;15,00</span>
    <span class="product-price__discount">&euro;10,00</span>
    <span class="discountPercentage" > </span>
  </div>
</div>


<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__value">&euro;15,90</span>
    <span class="discountPercentage" > </span>
  </div>
</div>