在没有很多 jQuery 请求的情况下获取传递的元素属性和属性

Question

我有一些带有列表元素的列表，每个列表元素都有许多自定义属性，例如data-user-id、data-avatar 等。在每个列表元素上，我都附加了一个像这样的 jQuery 点击事件

$('*.friendListItem').on('click', function () {
    var userId = this.something;
    var avatar = this.foo;
}

现在，由于我在 this 对象中拥有了所需的所有属性和属性的传递元素，因此我正在寻找访问它们的最佳方式，因为使用 $(this).attr('data-user-id); 会导致不必要的 DOM遍历。

我现在能想到的使用纯Javascript的唯一方法就是这样

this.attributes['data-user-id'].nodeValue

这似乎不是很好和最佳的。

有没有更好的方法来做我想做的事？

Answer 1

您可以使用Element.dataSet 属性。

var userId = this.dataset.userId; //data-user-id

注意：对于带连字符的属性，将使用 camelCase。

$('span').click(function() {
  console.log(this.dataset.userId)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-user-id="10">Click me<span>