在 Vanilla JS 中计算产品的折扣百分比

如何解决在 Vanilla JS 中计算产品的折扣百分比

嗨，我正在尝试使用 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>

解决方法

问题可以在这里找到；

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>