javascript - jQuery 循环遍历字符串计算字符串值的百分比折扣

Question

我目前正在尝试计算折扣百分比 - 或网上商店两个价格之间的百分比差异。我还需要能够遍历页面上应用了相同类名的所有项目。

在类名 div 中，空白处包含一些文本，需要 trim 这些文本以计算百分比。因此，我必须删除字符串的文本部分，保留数字并进行计算。

我正在使用的 HTML 输出如下所示:

<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
   </div>
</div>

我使用以下 jQuery 来隔离销售价格和正常价格的价格值(数字)，使用“parseInt”去除文本:

var regPrice = parseInt($('.regular-price').text().replace(/[^0-9.]/g, ""));
var salePrice = parseInt($('.sale-price').text().replace(/[^0-9.]/g, ""));

这产生了我期望的值。我遇到的问题是如何使用这些 var 创建一个计算，该计算将循环遍历页面上的所有“.regular-price”和“.sale-price”类并产生百分比结果。

我尝试使用“each”函数来完成我的结果:

$('.sale-price').each(function(index) {
    console.log( ((regPrice - salePrice) / (regPrice)) * 100%) );
 });

但是控制台是空的。

我只想在循环遍历所有项目时计算两个数字之间的百分比差异并写入控制台，直到我决定将值放在哪里。

谢谢。

Answer 1

页面上有可能存在多个具有相同类的元素。

您必须找到包含定价信息的最近父元素，并使用 this 来定位容器中的元素。

$('#button').on('click', () => {
    $('.price-wrap').each(function($elem) {
    debugger;
        let $regPrice = $('.regular-price', this);
        let $salePrice = $('.sale-price', this);
        
        let regPrice = getParsedPrice($regPrice);
        let salePrice = getParsedPrice($salePrice);
        
        let discount = ((regPrice - salePrice) / (regPrice)) * 100;
        
        discount = discount > 0 ? discount : 0;

        $('.discount', this).text(`$${discount.toFixed(2)}%`)
    });
});

function getParsedPrice($elem) {
  return parseInt($elem.text().replace(/[^0-9.]/g, ""), 10);
}

.price-wrap {
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $549.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $489.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $753.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $620.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<button id="button">Calculate Discount</button>