Javascript获取动态设置的data-*属性

Question

假设我有多个属于 game_join_a 类的元素，及其各自的data-tbl从数据库动态设置的属性。我想检索这些属性以便在我的代码中进一步使用它们。

我在下面使用的代码返回告诉我 a[i]未定义。

a = document.getElementsByClassName("game_join_a");
for(i = 0; i < a.length; i++){
    a[i].addEventListener("click", function(){
        console.log(a[i].getAttribute("data-tbl"));
    });
}

Answer 1

a = document.getElementsByClassName("game_join_a");
for(i = 0; i < a.length; i++){
    a[i].addEventListener("click", function(){
        console.log(this.getAttribute("data-tbl"));
    });
}

this 指的是单击事件绑定(bind)到的元素。如果您要动态添加元素而不仅仅是 data- 属性，您也可以尝试以下操作:

var a = document.getElementById('game_join_container'); // just something that contains all the elements that will be dynamically added

a.addEventListener('click', function (event) {
    // check to see if original element clicked is a "game_join_a" element first
    if(event.target.classList.contains('game_join_a')) {
        console.log(event.target.getAttribute('data-tbl'));
    }
});