时间戳

首页 > 解决方案 > 普通的 javaScript 从事件侦听器获取函数中的属性

javascript - 普通的 javaScript 从事件侦听器获取函数中的属性

问题描述

所以我想弄清楚如何从一组共享相同类名的链接中获取数据 id 值。例如链接出现在这个标记中

<td><a class="deleteLink" href="#" data-id="4">&#10005;</a></td>
<td><a class="deleteLink" href="#" data-id="7">&#10005;</a></td>

然后我有一些创建事件监听器的javascript。出于某种原因，我在控制台中收到一条错误消息“ Uncaught TypeError: this.getAttribute is not a function ”

function deleteUser(event){
    event.preventDefault();
    var userId = this.getAttribute('data-id');
    if(confirm('Are you sure you want to delete this entry?')){
        window.location.href = 'delete.php?id=' + userId;
    }
}

var deleteLinks = document.getElementsByClassName('deleteLink');

for (i = 0; i < deleteLinks.length; i++) {
    addEventListener('click',deleteUser,false);
}

标签： javascripthtmlconsoleevent-listenergetattribute

解决方案

忘记正确附加监听器，应该是

deleteLinks[i].addEventListener('click',deleteUser,false);

使用querySelectorAll而不是getElementsByClassName完成答案

function deleteUser(event){
    event.preventDefault();
    var userId = this.getAttribute('data-id');
    if(confirm('Are you sure you want to delete this entry?')){
        window.location.href = 'delete.php?id=' + userId;
    }
}

var deleteLinks = document.querySelectorAll('.deleteLink'); 

for (i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click',deleteUser,false);
}

推荐阅读