如何以有效的方式向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

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

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

Answer 2

将数据属性添加到dom元素,然后使用它们进行读取

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

甚至

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

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

只要注意会有的jQuery在你的数据-属性进行某些操作的情况下,如所描述这里.为了简单起见,请考虑更改data-userId为data-userid