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

Question

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

我已经有了用来获得百分比折扣的代码，但我似乎不能让它对每个产品动态地工作。目前，它将运行计算，然后打印每个产品的相同百分比折扣，即使是全价产品。

对此，我们将不胜感激。谢谢！

null

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>

null

Answer 1

你需要

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

不需要

• 在您显示的代码中通过.product-price__primary
• ParseFloat，因为您没有添加任何位置。如果确实需要添加
,可以使用一元加 +wasprice

null

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()方法：

null

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

css lang-css prettyprint-override">.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>