遍历产品并获得个人储蓄

Question

我正在尝试遍历一系列产品并获取每个产品的单独节省，并将其显示为每个产品下方的消息。

我有以下机制，但它似乎计算第一个产品，然后将该计算应用于下面的所有产品？

HTML

var num1 = parseInt($('.price > div').text().match(/\d+/)[0], 10);
var num2 = parseInt($('.worth-price').text().match(/\d+/)[0], 10);   
var diff = num2 - num1;

var savings = document.querySelectorAll('.productCard_price'), i;
for (i = 0; i < savings.length; ++i) {
  savings[i].innerHTML += "SAVE = " + diff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £680.00
         </span>
      </div>
   </div>
</div>
<br>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £780.00
         </span>
      </div>
   </div>
</div>
<br>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £880.00
         </span>
      </div>
   </div>
</div>

Answer 1

问题是您的 diff、num1、num2 对于第一个元素仅运行ning 一次。

尝试这样的操作，使所有元素都达到运行。

$('.productCard_price').each(function() {
  var num1 = parseInt($(this).find('.price > div').text().match(/\d+/)[0], 10);
  var num2 = parseInt($(this).find('.worth-price').text().match(/\d+/)[0], 10);
  var diff = num2 - num1;

  $(this).find(".price").append("<div>SAVE = " + diff + "</div>")
});

工作演示

$('.productCard_price').each(function() {
  var num1 = parseInt($(this).find('.price > div').text().match(/\d+/)[0], 10);
  var num2 = parseInt($(this).find('.worth-price').text().match(/\d+/)[0], 10);
  var diff = num2 - num1;

  $(this).find(".price").append("<div>SAVE = " + diff + "</div>")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="productCard_price py-1">
  <div class="price">
    <div>£420.00
      <span class="text-gray productCard_package worth-price">
         WORTH £680.00
         </span>
    </div>
  </div>
</div>
<br>
<div class="productCard_price py-1">
  <div class="price">
    <div>£420.00
      <span class="text-gray productCard_package worth-price">
         WORTH £780.00
         </span>
    </div>
  </div>
</div>
<br>
<div class="productCard_price py-1">
  <div class="price">
    <div>£420.00
      <span class="text-gray productCard_package worth-price">
         WORTH £880.00
         </span>
    </div>
  </div>
</div>

Answer 2

问题的发生是因为您将 num1 和 num2 置于循环之外。因此，默认情况下，jQuery 和 $('price>div') 只会获取它找到的第一个元素，而不是所有元素。

所以你应该在 for 循环内声明你的变量或者至少给它们赋值。

P.S。您的代码是原始 javaScript 和 jQuery 之间的奇怪组合。我建议您只使用 vanilla javaScript。如果您真的不需要 jQuery。是的，下面的代码会更长，看起来更复杂，但在性能方面是值得的

let savings = document.querySelectorAll('.productCard_price'), i;
for (i = 0; i < savings.length; ++i) {
const num1 = parseInt($(savings[i]).find('.price>div').text().match(/\d+/)[0], 10);
const num2 = parseInt($(savings[i]).find('.worth-price').text().match(/\d+/)[0], 10);   
const diff = num2 - num1;
  savings[i].innerHTML += `SAVE = ${diff}`;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £680.00
         </span>
      </div>
   </div>
</div>
<br>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £780.00
         </span>
      </div>
   </div>
</div>
<br>
<div class="productCard_price py-1">
   <div class="price">
      <div>£420.00
         <span class="text-gray productCard_package worth-price">
         WORTH £880.00
         </span>
      </div>
   </div>
</div>

遍历产品并获得个人储蓄

Looping through products and getting individual savings

html

jquery

calculation