javascript - 如何以有效的方式向 HTML 元素添加属性？

Question

我希望能够向 HTML 元素添加一个属性，以便能够识别它所指的内容。

例如，如果我有一个名称列表和每个名称旁边的复选框，如下所示：

<div id="users">
 Bob smith <input type=checkbox />
</div>

当一个复选框被点击并调用它的事件处理函数时，我希望能够识别哪个用户被选中/取消选中。

理想情况下，我正在寻找这样的东西：

<input type=checkbox data-userId = "xxx" />

然后当它点击时：

function handleClick()
{
  var userId = $(this).attr('data-userId');
}

但是，我希望以一种不会破坏我的 HTML 验证的方式来执行此操作，并且仍然是有效的 HTML 并且可以在所有浏览器中使用。

有什么建议么？

score 6 · Accepted Answer

数据属性由 html5 提供，是有效属性。您可以通过jquery的数据方法访问数据属性

var userId = $(this).data('userId');

score 5 · Accepted Answer

将 data- 属性添加到您的 dom 元素，然后使用

var userId = $(this).attr('data-userId');

甚至

var userId = $(this).data('userId');

这是执行此操作的正确方法，并且不会破坏任何 HTML 验证。

请注意，jQuery 会对您的 data- 属性执行一些大小写操作，如此处所述。为简单起见，请考虑更改data-userId为data-userid

2 回答 2