获取传递的元素属性和属性，而不需要很多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>