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

Question

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

在类名 div 中，有一些文本包含在一个空中，需要修剪以计算百分比。所以，我必须删除字符串的文本部分，保留数字并进行数学运算。

我正在使用的 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

您需要将变量声明移动到循环中，以便在有许多零售和销售价格时，将变量重置为当前值。您还需要使用index 获取相关的正常价格。

当您想要循环正在迭代的当前销售价格时，您可以将this 包装在一个 JQuery 对象中。

然后，删除100 之后的% 并在console.log 语句中添加另一个(。

我还强烈建议您将价格放入它们自己的元素中，例如 div，这将使提取数字更加简单。

$('.sale-price').each(function(index) {
  var regPrice = parseInt($($('.regular-price')[index]).text().replace(/[^0-9.]/g, ""));
  var salePrice = parseInt($(this).text().replace(/[^0-9.]/g, ""));
  console.log(( ((regPrice - salePrice) / (regPrice)) * 100) );
});

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

Answer 2

我创建了一个使用正则表达式从元素中提取价格的函数。然后我做了一个小算法来计算折扣百分比。此外，我添加了价格高于竞争对手的可能性，以便返回 0% 的折扣而不是负值。

function getPrice(elem){
  return elem.match(/\d+.\d{2}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $regPrice = $('.regular-price');
let $salePrice = $('.sale-price');

$regPrice.each(function(k, v){
  let regPrice = getPrice($regPrice[k].innerHTML);
  let salePrice = getPrice($salePrice[k].innerHTML);
  let discount = getDiscount(regPrice, salePrice);
  console.log(discount.toFixed(2) + '% of discount!');
});

<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>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $569.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $369.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>

Answer 3

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

您必须找到包含定价信息的最接近的父级，并使用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>