文章内容
2023/4/12 10:24:51,作 者: 黄兵
JavaScript id 选择器示例
一个页面有如下元素：
<button class="btn btn-sm btn-danger fw-semibold me-2" id="delete-number-1" data-number="{{ item.id }}">删除号码</button>
<button class="btn btn-sm btn-danger fw-semibold me-2" id="delete-number-2" data-number="{{ item.id }}">删除号码</button>
...
我们呢应该如何使用 JavaScript 的选择器，选择 id 呢？
解决方案：
如果许多具有类似 ID 的元素，可以使用以下方式来选择它们：
// 获取所有具有类名 "btn" 的元素
var buttons = document.getElementsByClassName("btn");
// 遍历每个按钮并绑定单击事件
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
if (button.id.startsWith("delete-number-")) { // 过滤掉不需要的按钮
button.addEventListener("click", function() {
// 在这里添加处理单击事件的代码
});
}
}上述代码中，我们使用 getElementsByClassName() 方法来获取具有类名 "btn" 的所有元素，然后使用循环遍历每个元素。我们还使用 startsWith() 方法来过滤掉不需要的按钮。在每个按钮的回调函数中，以添加具体处理单击事件的代码。
参考资料：
1、chatGPT
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - JavaScript id 选择器示例
评论列表