来自具有相同类名的段落的输入或字符串的值总和始终显示“0”

Posted 2023-03-16

【中文标题】来自具有相同类名的段落的输入或字符串的值总和始终显示“0”

【英文标题】：sum of values from inputs or strings from paragraphs with same class names always shows '0'

【发布时间】：2021-07-08 11:13:02

【问题描述】：

我有一个简单的购物车 div，其中包含所选产品的 ul 列表。我想显示所有产品的价格总和，但无法弄清楚（li 是动态创建的，可以从购物车中删除，因此总和也应该动态工作）。

ul的结构是这样的：

<ul id='koszyk'>
 <li>
   <input type='hidden' class='price' value='20'>
   <p class='p_price'>20 zł</p>
   <...>
 </li>
</ul>

我尝试使用此 Sum of values from different divs with the same class 按段落字符串求和，但控制台输出始终显示“0”：

var sum = 0;
$('.p_price').each(function()
   sum += parseFloat($(this).text());                                    
);
console.log(sum);

脚本在 ul 中。我也试过这个，但结果相同：

var sum = 0;
$('.price').each(function()
   sum += parseFloat($(this).valueOf());                                    
);
console.log(sum);

我也尝试使用数组来存储所有价格，但我不擅长使用数组。 这可能是一个简单的错误问题，因为我还是一个初学者，所以我也更喜欢尽可能简单的解决方案。

【参考方案1】：

使用val()方法代替valueOf()获取输入元素的value。

var sum = 0;
$('.price').each(function()
   sum += parseFloat($(this).val());                                    
);
console.log(sum);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='koszyk'>
 <li>
   <input type='hidden' class='price' value='20'>
   <p class='p_price'>20 zł</p>
   <...>
 </li>
</ul>

【讨论】：

我尝试使用 val 而不是 valueOf，但它仍然显示 '0'，我也尝试创建类似 $('li > .price') 的路径，但仍然不起作用

你确定each中的代码正在执行吗？尝试调试它或在其中添加一个 console.log 语句以验证代码是否运行。可能是您在页面加载之前运行脚本，因此找不到 html 元素，导致总和为 0。如果您运行上面的 sn-p，您可以看到输出正确状态为 20

我将控制台日志放在函数中，但它没有显示，所以我猜它没有像你说的那样执行，但我真的不知道我应该把脚本放在哪里，这样它才能工作。脚本在 ul 中，但我还使用了一些其他功能。我试图把它放在 ul 之外，但结果相同。

尝试在正文的结束标签之前添加脚本标签（</body>）

好吧，我想通了。李的“价格”输入所在的位置是在按下按钮后动态创建的，因此它们在页面打开时不会出现在页面上。我不得不像这样使用 DOMNodeInserted 和 DOMNodeRemoved 事件 $("#koszyk").bind("DOMNodeInserted","DOMNodeRemoved",function() 所以当 li 在 ul 中追加或删除它们时它会运行代码。跨度>