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);
}

Example

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

2 个答案: