纯JS实现点击列表按钮获取对应JSON对象的ID

问题分析 #

你的代码存在两个关键问题：

1. 所有按钮复用了相同的id="retrieve-ID"，HTML中id必须唯一，这会导致后续事件绑定逻辑出错
2. 未给按钮绑定点击事件来关联对应列表项的ID

下面提供几种可靠的解决方案：

方案一：自定义数据属性 + 事件委托（推荐） #

这种方式性能最优，尤其适合大量列表项的场景，无需给每个按钮单独绑定事件，通过事件冒泡统一处理。

修改代码步骤： #

1. 在按钮模板中添加data-id属性存储对应项的ID，同时将重复的id改为类名
2. 给父列表元素绑定点击事件，判断点击目标为按钮后，读取data-id的值

var details = [
    { id: 0, department: "HR", name: "samy" },
    { id: 1, department: "Accounting", name: "william" }
];

function displaydetails(parent, array) {
    var html = "";
    for (let i = 0; i < array.length; ++i) { // 用let声明循环变量，避免作用域泄漏
        let itemTemplate = `
<li>
    <h2>${array[i].department}</h2>
    <div>name: ${array[i].name}</div>
    <div>id: ${array[i].id}</div>
    <div><button class="retrieve-btn" data-id="${array[i].id}">GET ID</button></div>
</li>`;
        html += itemTemplate;
    }
    parent.innerHTML += html;
}

displaydetails(document.getElementById("detailslist"), details);

// 添加事件委托
document.getElementById("detailslist").addEventListener('click', function(e) {
    if (e.target.classList.contains('retrieve-btn')) {
        const itemId = e.target.dataset.id;
        // 这里执行后续操作，比如展示或存储
        console.log("获取到的ID：", itemId);
        alert(`当前项ID：${itemId}`);
    }
});

方案二：直接为按钮绑定点击事件（闭包实现） #

在循环生成元素时，直接给每个按钮绑定点击事件，利用闭包保存当前项的ID。

var details = [
    { id: 0, department: "HR", name: "samy" },
    { id: 1, department: "Accounting", name: "william" }
];

function displaydetails(parent, array) {
    for (let i = 0; i < array.length; ++i) { // 用let确保每次循环的i是独立作用域
        const item = array[i];
        // 创建li元素
        const li = document.createElement('li');
        li.innerHTML = `
            <h2>${item.department}</h2>
            <div>name: ${item.name}</div>
            <div>id: ${item.id}</div>
            <div><button class="retrieve-btn">GET ID</button></div>
        `;
        // 绑定点击事件
        li.querySelector('.retrieve-btn').addEventListener('click', function() {
            console.log("获取到的ID：", item.id);
            alert(`当前项ID：${item.id}`);
        });
        parent.appendChild(li);
    }
}

displaydetails(document.getElementById("detailslist"), details);

方案三：DOM遍历获取ID（不推荐） #

如果不想修改按钮结构，可以通过点击按钮后向上遍历DOM树找到父级li，再从中提取ID元素的内容。这种方式依赖DOM结构，一旦页面布局变动就会失效，因此不推荐。

document.getElementById("detailslist").addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        // 找到父级li
        const li = e.target.closest('li');
        // 从li内的id元素提取值
        const idElement = li.querySelector('div:nth-child(3)');
        if (idElement) {
            const itemId = idElement.textContent.replace('id: ', '').trim();
            console.log("获取到的ID：", itemId);
        }
    }
});

注意事项 #

• 避免使用重复id，改用类名标识同类型元素
• 动态生成的元素优先使用事件委托，减少内存占用
• 用let声明循环变量，避免变量作用域导致的逻辑错误

内容的提问来源于stack exchange，提问作者chris1234