计算产品列表页面上多个产品的百分比折扣

Question

您好，我正在尝试计算产品列表页面上有过去价格和现在价格的在售产品的百分比折扣。

我已经获得了用于获取百分比折扣的代码，但我似乎无法让它针对每个产品动态工作。目前它将运行计算然后打印每个产品的相同百分比折扣，甚至对于全价产品也是如此。

如有任何帮助，我们将不胜感激。谢谢！

setTimeout(function discountPrice() {
  $('.product-slab__price').each(function() {
    var pattern = /[^0-9\.]/g;
    var wasPrice = parseFloat($(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
    var subtractPrice = (Math.abs(wasPrice - newPrice));
    var dividePrice = (Math.abs(subtractPrice / wasPrice));
    var multiplyPrice = (Math.abs(dividePrice * 100));
    $('.discountPercentage').html(multiplyPrice.toFixed(0) + "&#37");
  });
}, 500);

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

.product-price__value.product-price__value--discounted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">&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

你需要

使用,this留在当前slab的范围内
测试 multiplyPrice 是一个数字
移动正则表达式，因为您不需要每次都创建它

不需要

通过您显示的代码中的 .product-price__primary
parseFloat 因为你没有在任何地方添加。如果确实需要添加

+wasPrice

const pattern = /[^0-9\.]/g,
  discountPrice = function() {
    $('.product-slab__price').each(function() {
      const wasPrice = $(".product-price__was", this).text().replace(pattern, "") / 100,
        newPrice = $(".product-price__value--discounted", this).text().replace(pattern, "") / 100,
        subtractPrice = Math.abs(wasPrice - newPrice),
        dividePrice = Math.abs(subtractPrice / wasPrice),
        multiplyPrice = Math.abs(dividePrice * 100);

      if (!isNaN(multiplyPrice)) $('.discountPercentage', this).html(multiplyPrice.toFixed(0) + "&#37");
    });
  };

setTimeout(discountPrice, 500);

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

.product-price__value.product-price__value--discounted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">&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 2

问题是因为您在遍历循环时选择所有 DOM 中的元素和那些类。

相反，您需要将那些类与迭代中的当前 .product-slab__price 相关的元素作为目标。为此，请使用 this 关键字和 find() 方法：

setTimeout(function discountPrice() {
  var pattern = /[^0-9\.]/g;

  $('.product-slab__price:has(.product-price__value--discounted)').each(function() {
    let $slab = $(this);
    var wasPrice = parseFloat($slab.find(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
    var newPrice = parseFloat($slab.find(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);

    var subtractPrice = Math.abs(wasPrice - newPrice);
    var dividePrice = Math.abs(subtractPrice / wasPrice);
    var multiplyPrice = Math.abs(dividePrice * 100);
    
    $slab.find('.discountPercentage').html(multiplyPrice.toFixed(0) + "&#37");
  });
}, 500);

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

.product-price__value.product-price__value--discounted {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
  <div class="product-price__primary">
    <span class="product-price__was">Was &euro;10,00</span>
    <span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">&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>

请注意，由于正则表达式内容是静态的，因此可以在循环外定义。

计算产品列表页面上多个产品的百分比折扣

Calculate percentage discount of multiple products on a product listing page

jquery

percentage

price

discount