我正在动态加载页面中的一些内容,并希望获得所有数据属性的总数。
首先,元素被克隆并附加
$('.chip').on('click', function () {
$(this).clone().appendTo('.chipPlacement');
});
然后我编写了一个应该获取总数的函数
function chipsBet() {
var redchip = $('.chipPlacement .chipValue.r').data() || 0;
var bluechip = $('.chipPlacement .chipValue.b').data() || 0;
var orangechip = $('.chipPlacement .chipValue.o').data() || 0;
var total = redchip.chipValue + bluechip.chipValue + orangechip.chipValue;
return total;
}
在附加元素之前,HTML 看起来像这样
<div class="chipPlacement"></div>
一旦附加了 HTML 结构
<div class="chipPlacement">
<div class="chip red">
<div class="chipValue r" data-chip-value="1">1</div>
</div>
</div>
我需要监听 DOM 结构的变化,然后触发 chipsBet()
函数,但我不知道如何让它工作。我无法使用 .on('change')
因为它仅适用于 input
、textarea
和 select
.
我尝试在 .chip.on('click')
中触发 chipsBet
函数,但返回了 NaN
。
如何获取 DOM 中新元素的data-attribute-values
?
最佳答案
如果您没有蓝色或橙色芯片,则您实际上是在尝试从0
获取.chipValue
,而0
是未定义的
将其与另一个数字相加会得到 NaN
。
您可以简单地迭代放置元素中的所有 .chipValue
元素,如下所示:
function chipsBet()
{
var total = 0;
$('.chipPlacement .chipValue').each(function() {
total += $(this).data('chipValue');
});
return total;
}
关于javascript - 获取所有数据属性值的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25244619/