Jquery 通过产品循环并获得个人储蓄

我正在尝试循环浏览一系列产品，获得每种产品的个人储蓄，并将其作为信息显示在每种产品下

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

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；
对于（i=0；i

£420.00
价值680.00英镑


£420.00
价值780.00英镑


£420.00
价值880.00英镑

问题是您的

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'）。每个（函数（）{
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（“SAVE=“+diff+”）
});

工作演示

$（'.productCard_price'）。每个（函数（）{
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（“SAVE=“+diff+”）
});

£420.00
价值680.00英镑


£420.00
价值780.00英镑


£420.00
价值880.00英镑
发生问题的原因是，您将
num1
和
num2
置于循环之外。因此，默认情况下，带有
$（'price>div'）
的jQuery将只获取它找到的第一个元素，而不是所有元素

因此，您应该在
for
循环中声明变量或至少为它们赋值

另外，你的代码是普通javaScript和jQuery的奇怪混合体。我建议你只使用普通的javaScript，如果你不真正需要jQuery的话。是的，下面的代码会更长，看起来更复杂，但从性能上来说是值得的


let savings=document.querySelectorAll（'.productCard_price'），i；
对于（i=0；idiv'）.text（）.match（/\d+/）[0]，10）；
const num2=parseInt（$（节省[i]）.find（'.worth price'）.text（）.match（/\d+/）[0]，10）；
常数差=num2-num1；
savings[i].innerHTML+=`SAVE=${diff}`；
}

£420.00
价值680.00英镑


£420.00
价值780.00英镑


£420.00
价值880.00英镑
请注意，`not work在IE中的用法，如`SAVE=${diff}@CarstenLøvboAndersen是的，尽管我使用的是Babel，这就是为什么我习惯用ES6语法编写：）@MihaiT关于不真正需要jQuery的短语有点像是在攻击你自己。从技术上讲，您永远不会真正需要jQuery，因为它毕竟只是一个基于vanilla JS构建的框架。我明白你的意思了+尽管如此（任何时候答案都可以摆脱不必要的jQuery），我还是非常感谢，很高兴我不在一百万英里之外，但是知道错误的澄清总是很好的。