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”类并产生百分比结果。

我尝试使用“每个”功能来完成我的结果：

$('.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>

Answer 2

您需要将变量声明移入循环，以便在存在许多零售和销售价格时，变量将重置为当前值。您还需要使用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 3

我创建了一个使用正则表达式从元素中提取价格的函数。然后，我制作了一个小的算法来计算折扣百分比。此外，我还添加了价格高于竞争对手的可能性，以便获得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>

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

3 个答案: