动态按钮列表中的ID

在动态创建的按钮中使用自定义属性存储ID，通过事件委托获取所需ID值。

示例代码如下：

HTML部分：

<div id="button-container"> <button class="dynamic-button" data-id="1">按钮1</button> <button class="dynamic-button" data-id="2">按钮2</button> <button class="dynamic-button" data-id="3">按钮3</button> <button class="dynamic-button" data-id="4">按钮4</button> </div>

JavaScript部分：

const container = document.querySelector('#button-container');

container.addEventListener('click', function(event) { const target = event.target; if (target.classList.contains('dynamic-button')) { const id = target.dataset.id; console.log(被单击的按钮的ID为：${id}); } });

// 动态创建按钮的示例代码 const buttonData = [ { id: 5, label: '按钮5' }, { id: 6, label: '按钮6' }, ];

buttonData.forEach(function(data) { const buttonEl = document.createElement('button'); buttonEl.classList.add('dynamic-button'); buttonEl.dataset.id = data.id; buttonEl.textContent = data.label; container.appendChild(buttonEl); });