javascript - 无法从元素中的 data-n 获取数据

Question

我有这个Span:

<span class="span-link" id="2" data-state="True" onclick="javascript: changestate(this.id);">Change State</span>

在 Javascript 函数中，我使用此代码来获取值:

function changestate(_thingid) {
    alert(_thingid);
    var tt = $(this).attr("data-state");
    alert(tt);        
}

我得到 data-state 的 未定义 。我通过 $(this).data("state") 进行测试 所以也得到了未定义。

有什么问题吗？

Answer 1

这是因为该上下文中的 this 引用了没有任何属性的 window 对象。您应该将该元素传递给处理程序并使用它而不是 this 关键字。

... onclick="changestate(this);"

function changestate(thing) {
    var id = thing.id;
    var tt = $(thing).attr("data-state");
    alert(tt);
}

另一个选项是使用传递的 id 来选择单击的元素，在这种情况下这不是一个好主意，因为 this 已经引用了单击的元素。

由于您使用的是 jQuery，因此您还可以使用它的 on 方法。 on 回调中的 this 关键字引用被单击的元素。

$('span.span-link').on('click', function() {
     var id = this.id;
     var tt = $(this).data('data-state');
});