javascript - 使用 html “data-” 属性

Question

考虑这样的一行：

<div id='abc' onclick='DoSomething(this.id)'></div>

现在，假设它被扩展为更像这样的东西：

<div id='abc' data-something='whatever' onclick='DoSomething(this.id)'></div>

这里还没有功能上的区别，但这是我的问题。我正在寻找一种将“data-something”的值传递给 DoSomething 函数而不是 id 的方法。我似乎找不到这样做的方法？可能吗？

像下面这样的东西会很好，但当然它不是这样工作的。（我只是将它包括在内以帮助说明预期目标。

<div id='abc' data-something='whatever' onclick='DoSomething(this.data-something)'></div>

Answer 1

你可以做

DoSomething(this.dataset.something)

但通常建议将 javascript 部分和 HTML 分开，当您的元素具有 id 时，这尤其容易：

<div id='abc' data-something='whatever'></div>
<script>
    document.getElementById('abc').onclick = function(){
        DoSomething(this.dataset.something)
    }
</script>

在 Internet Explorer 上，对数据集的支持不完整。在 IE10-，你需要使用

DoSomething(this.getAttribute('data-something'))

Answer 2

你应该能够这样做this.getAttribute("data-something")，像这样：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something"))></div>

或者你可以使用this.dataset.something.

这是我的来源

Answer 3

你应该使用getAttribute方法：

<div id='abc' data-something='whatever' onclick='DoSomething(this.getAttribute("data-something")'></div>

但我强烈建议您避免将内联 javascript 委托给元素。您最好使用 DOM 或 jQuery，并注意jQuery有一种方法可以更轻松地处理data-*属性。

Answer 4

如果你想考虑 jQuery，你可以将你的代码转换成这样的东西：

html

<div id="abc" data-something="whatever">click here</div>

jQuery

jQuery(document).ready(function($) {
    $('#abc').on('click', function () {
        DoSomething($(this).attr('data-something'));
    });
});

或更好

jQuery(document).ready(function($) {
    $('#abc').on('click', function () {
        DoSomething($(this));
    });
});

function DoSomething(obj){
    alert(obj.attr('id'));
    alert(obj.attr('data-something'));
}