javascript - 获取所有数据属性值的总和

Question

我正在动态加载页面中的一些内容，并希望获得所有数据属性的总数。

首先，元素被克隆并附加

$('.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？

Answer 1

如果您没有蓝色或橙色芯片，则您实际上是在尝试从0获取.chipValue，而0是未定义的将其与另一个数字相加会得到 NaN。

您可以简单地迭代放置元素中的所有 .chipValue 元素，如下所示:

function chipsBet() 
{
  var total = 0;

  $('.chipPlacement .chipValue').each(function() {
    total += $(this).data('chipValue');
  });

  return total;
}