在 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，但是，您将需要 forEach 提供的 el 元素，如下所示：

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>

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

Calculate discount % on a product in Vanilla JS

javascript

foreach

percentage

discount