Question

我有一个代码，它将从mysql中提取数据并显示一个复选框。单击复选框，它将总计总和。

<td><input type="checkbox" name=check[] value="<?php echo $row['amount'];?>" data-weight="<?php echo $row['amount'];?>"> </td>
<div>Total: <span id="total">0</span></div>

和JS是

<script>
    (function () {
          var totalEl = document.getElementById('total'),
              total = 0,
              checkboxes = document.form1['check[]'],
              handleClick = function () {
                  total += parseInt(this['data-weight'], 10) * (this.checked ? 1 : -1);
                  totalEl.innerHTML = total;
                  alert (this['data-weight']);
              },
              i, l
          ;
          for (i = 0, l = checkboxes.length; i < l; ++i) {
              checkboxes[i].onclick = handleClick;
          }
      }());
    </script>

但是我始终将结果视为未定义的警报（我已添加用于调试目的）和总计为NaN。我做错了什么？

Answer 1

我做错了什么？

您未正确访问data-*属性（this['data-weight']）。 DOM元素具有一组特定的属性，并非所有HTML属性都映射到DOM属性1：1。 data-*属性当然不会。

您可以使用getAttribute获取属性的值：

this.getAttribute('data-weight')

或者，您可以使用dataSet属性：

this.dataSet.weight

DEMO

总计为NaN，因为parseInt(undefined, 10)会返回NaN，因此任何进一步的计算都会产生NaN。

虽然我有一个变量值集，但JS返回undefined

1 个答案: