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

Question

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

在 class 名称 div 中，空白处包含一些文本，需要修剪这些文本才能计算百分比。所以，我必须删除字符串的文本部分，保留数字并进行数学计算。

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

<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      9.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      9.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, ""));

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

我已经尝试使用 "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>
      9.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      9.00
   </div>
</div>

Answer 2

我创建了一个使用正则表达式从元素中提取价格的函数。然后我做了一个计算折扣百分比的小算法。此外，我添加了价格高于竞争对手的可能性，以便 return 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> 9.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> 9.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> 9.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> 9.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> 9.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> 9.00
  </div>
</div>

Answer 3

页面上有可能存在多个相同class的元素

您必须找到包含定价信息的最近的父元素，并使用 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> 9.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> 9.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> 3.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> 0.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<button id="button">Calculate Discount</button>

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

jQuery loop through strings calculate percentage discount from string values

javascript

math

jquery

loops

calculation