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是指 click 事件绑定到的元素。如果要动态添加元素而不仅仅是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'));
    }
});

Answer 2

试试这个

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

例