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对于第一个元素只运行一次。

尝试类似的方法使其在所有元素上运行。

$('.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。因此，默认情况下，带有$('price>div')的jQuery将仅获得它找到的第一个元素，而不是全部。

因此，您应该在for循环内声明变量或至少给变量赋值。

P.S。您的代码是原始javaScript和jQuery之间的奇怪混合。我建议您只使用普通的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>

遍历产品并获得个人节省

2 个答案: