如何以有效的方式向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并且可以在所有浏览器中使用。

有什么建议吗？

Answer 1

Data attributes由html5提供，是有效的属性。您可以通过jquery

的数据方法访问数据属性

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

Answer 2

将数据属性添加到dom元素，然后使用

读取它们

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

甚至

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

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

请注意，jQuery会对您的数据属性执行一些案例操作，如here所述。为简单起见，请考虑将data-userId更改为data-userid