本文旨在解决JavaScript事件监听中因HTML元素ID重复而导致的问题。通过深入解析id属性的唯一性原则，并引入class属性与document.querySelectorAll()方法，文章将指导开发者如何正确地为多个具有相同行为的元素绑定事件监听器，确保所有目标元素都能响应用户交互，从而实现更健壮的前端功能。
1. 理解HTML ID的唯一性原则
在html文档中，id属性旨在为元素提供一个全局唯一的标识符。这意味着在整个html页面中，任何两个元素都不应拥有相同的id值。当您使用document.getelementbyid(‘someid’)方法时，浏览器会查找文档中第一个匹配该id的元素并返回它。如果文档中存在多个相同的id，getelementbyid()只会返回第一个，而忽略其余的同id元素。
在给定的场景中，PHP循环生成表格行时，为每一行的“View”按钮都赋予了相同的id=”myId”：
// ... 部分代码省略 ...while ($res2=mysqli_fetch_assoc($result2)) { echo ""; // ... 其他元素 ... // 错误的做法：为所有按钮使用相同的ID echo " View "; echo " "; // 注意：原始代码中闭合标签位置有误，应在循环内部}// ... 部分代码省略 ...
随后，JavaScript代码尝试为这个ID绑定点击事件：
document.getElementById('myId').addEventListener("click", function () { document.querySelector('.bg-modal').style.display = "flex";});
由于id=”myId”在表格中重复出现，document.getElementById(‘myId’)只会选中并为第一个“View”按钮绑定事件。因此，只有第一行的按钮能够触发弹窗，而其他行的按钮则无效。
2. 解决方案：使用Class选择器与querySelectorAll
为了解决这个问题，我们应该遵循HTML规范，为具有相同行为但不同实例的元素使用class属性，并通过document.querySelectorAll()方法来选择所有匹配的元素。
立即学习“Java免费学习笔记（深入）”；
2.1 修改HTML结构（PHP生成部分）
将按钮的id属性改为class属性。为了更好地语义化，我们将class命名为view-button（或根据实际功能命名）。同时，修正PHP循环中
标签的闭合位置。
ID Project Name Due Date Sub Date Comment Status Option 1, 'project_name' => 'Project A', 'duedate' => '2023-01-01', 'subdate' => '2022-12-30', 'comment' => 'First project', 'status' => 'Completed'], ['project_id' => 2, 'project_name' => 'Project B', 'duedate' => '2023-02-15', 'subdate' => '2023-02-10', 'comment' => 'Second project', 'status' => 'In Progress'], ['project_id' => 3, 'project_name' => 'Project C', 'duedate' => '2023-03-20', 'subdate' => '', 'comment' => 'Third project', 'status' => 'Pending'] ]; // 模拟 mysqli_fetch_assoc 循环 foreach ($data as $res2) { echo ""; echo "" . htmlspecialchars($res2['project_id']) . " "; echo "" . htmlspecialchars($res2['project_name']) . " "; echo "" . htmlspecialchars($res2['duedate']) . " "; echo "" . htmlspecialchars($res2['subdate']) . " "; echo """ . htmlspecialchars($res2['comment']) . "" "; echo "" . htmlspecialchars($res2['status']) . " "; // 将 id 更改为 class，并添加 data-属性以便后续获取行数据（如果需要） echo "View "; echo " "; } ?>
注意事项：
htmlspecialchars()：在PHP输出用户或数据库内容时，始终使用htmlspecialchars()函数来防止跨站脚本攻击（XSS）。data-project-id：这是一个HTML5的data-*属性，可以用来存储与元素相关的自定义数据。在点击事件中，我们可以通过this.dataset.projectId来获取对应的项目ID，这对于在弹窗中显示特定行的数据非常有用。闭合：确保标签在while循环（或foreach循环）内部正确闭合。
2.2 修改JavaScript事件绑定
现在，我们可以使用document.querySelectorAll(‘.view-button’)来获取所有带有view-button类的元素（即所有“View”按钮）。querySelectorAll()返回一个NodeList（节点列表），它是一个类似数组的对象。我们需要遍历这个NodeList，为每个元素单独绑定事件监听器。
document.addEventListener('DOMContentLoaded', function() { // 获取所有带有 'view-button' 类的元素 const viewButtons = document.querySelectorAll('.view-button'); const bgModal = document.querySelector('.bg-modal'); const popupProjectIdSpan = document.getElementById('popup-project-id'); // 获取显示项目ID的元素 const closeModalButton = document.querySelector('.close-modal'); // 遍历所有按钮，并为每个按钮添加点击事件监听器 viewButtons.forEach(button => { button.addEventListener('click', function(event) { event.preventDefault(); // 阻止标签的默认跳转行为 // 显示模态框 if (bgModal) { bgModal.style.display = "flex"; } // 如果需要，获取并显示点击按钮对应行的项目ID const projectId = this.dataset.projectId; // 获取data-project-id属性的值 if (popupProjectIdSpan && projectId) { popupProjectIdSpan.textContent = projectId; } // 可以在这里根据projectId发起Ajax请求获取更多详情并填充到模态框 console.log("Clicked project ID:", projectId); }); }); // 为关闭按钮添加事件监听器 if (closeModalButton) { closeModalButton.addEventListener('click', function() { if (bgModal) { bgModal.style.display = "none"; } }); } // 点击模态框背景关闭（可选） if (bgModal) { bgModal.addEventListener('click', function(event) { // 只有当点击事件的目标是bgModal本身时才关闭，避免点击内容区关闭 if (event.target === bgModal) { bgModal.style.display = "none"; } }); }});
代码解释：
document.addEventListener(‘DOMContentLoaded’, …)：确保DOM完全加载后再执行JavaScript代码，避免因元素未加载而无法选中。document.querySelectorAll(‘.view-button’)：通过类选择器选中所有具有view-button类的元素。forEach(button => { … })：遍历NodeList中的每一个按钮元素。button.addEventListener(‘click’, function(event) { … })：为当前遍历到的button元素添加点击事件监听器。event.preventDefault()：阻止标签点击后的默认行为（如跳转到#）。this.dataset.projectId：在事件监听器内部，this指向当前被点击的按钮元素。dataset属性提供对所有data-*属性的访问。
3. 总结与最佳实践
ID的唯一性：始终牢记id属性在HTML文档中必须是唯一的。它适用于需要唯一标识的元素，例如表单的label关联、特定的JavaScript操作目标或锚点链接。Class的多用性：class属性用于为多个元素应用相同的样式或行为。当您需要对一组相似的元素执行相同的JavaScript操作时，class是首选。getElementById vs querySelectorAll：document.getElementById()：用于获取单个、唯一的元素。document.querySelectorAll()：用于获取所有匹配指定CSS选择器的元素，返回一个NodeList，通常需要遍历。事件委托（Event Delegation）：对于包含大量动态生成元素的列表或表格，除了为每个元素单独绑定事件外，还可以考虑使用事件委托。即，将事件监听器绑定到它们的共同父元素上，然后通过事件冒泡和event.target来判断是哪个子元素触发了事件。这可以减少内存消耗和提高性能，尤其是在元素数量非常庞大时。例如，将点击事件绑定到元素上，然后检查event.target是否是view-button。
通过遵循这些原则和实践，您可以构建出更健壮、更易于维护且性能更优的前端应用程序。
以上就是JavaScript事件绑定：多元素交互的正确实践（避免ID重复）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1290320.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
MySQL全文搜索引擎集成方案_提升文本数据搜索能力的实用指南
mysql原生全文搜索功能存在明显局限，需结合外部搜索引擎才能满足复杂需求。1. mysql全文搜索适用于小数据量、简单查询场景，但分词能力弱，尤其对中文支持差，查询功能有限，无法实现模糊查询、纠错等高级功能，且性能随数据量增长显著下降。2. 外部搜索引擎如elasticsearch（es）和sph…
-
Android应用中实现游戏循环与UI更新的正确姿势
本文旨在解决Android应用开发中，开发者尝试使用传统游戏循环（如while(running)）导致应用无响应或崩溃的问题。核心内容是阐明Android事件驱动的UI模型，指导开发者如何正确初始化UI组件、设置事件监听器，并通过事件回调机制实现逻辑更新和UI刷新，避免阻塞主线程，确保应用的流畅运行…
-
google浏览器“请停用以开发者模式运行的扩展程序”怎么解决_google浏览器开发者模式扩展提示解决方法
1、关闭开发者模式并移除手动扩展可消除警告；2、替换为官方商店版本扩展避免风险；3、修改注册表或组策略可永久屏蔽提示；4、使用命令行参数临时绕过检查。 如果您在使用Google Chrome浏览器时，看到“请停用以开发者模式运行的扩展程序”的警告提示，这通常是因为当前有通过非应用商店方式加载的扩展程…
-
如何用AffinityPhoto导出AI生成图片？专业图像保存的详细指南
答案：AI生成图片导出时，色彩管理确保跨设备色彩一致，避免印刷偏色。需根据用途选择sRGB（网页）或CMYK（印刷）色彩空间，结合DPI、格式和重采样设置优化输出。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ Affinity Photo…
-
蝴蝶号无人直播怎么赚钱？从引流到转化全拆解
蝴蝶号无人直播要赚钱，核心在于内容策划与流量转化结合。1.内容为王，需优质且有吸引力，如风景、美食、宠物或商品展示；2.引流关键在平台规则运用，包括标题、标签、封面及定时开播；3.变现方式多样，如带货、知识付费、广告等，需与内容高度匹配；4.应对挑战需持续更新内容、多账号运营、增强互动感、防范技术与…
-
AMD RX 9070 XT显卡难得用12V-2×6供电接口：结果连烧两块！
10月14日最新消息，尽管NVIDIA显卡已普遍采用12V-2×6 16针供电接口，但AMD官方至今未将其纳入标准设计。目前仅有华擎、蓝宝石等少数厂商在非公版产品中尝试使用，而华硕也曾在R9700专业卡上应用过该接口。然而近期接连曝出接口烧毁事件，引发广泛关注。 首例问题出现在华擎的RX …
-
MAC的随航（Sidecar）功能怎么使用_MAC Sidecar功能使用教程
首先确认设备兼容性，确保Mac和iPad满足硬件与系统要求，并登录同一Apple ID。接着开启Wi-Fi和蓝牙，使两设备处于同一网络。通过控制中心“显示器”选项选择iPad名称，无线连接即可建立；或使用数据线进行有线连接以获得更稳定体验。连接后可在“系统设置-显示器-随航”中配置扩展或镜像模式，启…
-
MacBookPro怎么下VSCode_MacBookPro下载安装VSCode详细教程
访问code.visualstudio.com下载Mac通用版安装包；2. 解压后将Visual Studio Code.app拖入“应用程序”文件夹；3. 首次运行需右键选择“打开”以绕过安全限制；4. 推荐安装Python、Prettier等常用插件并配置环境变量；5. 若字体模糊可调整zoom…
-
edge浏览器如何找回被“睡眠标签页”休眠的页面_Edge浏览器找回睡眠标签页方法
被休眠的Edge标签页可通过点击激活恢复；若页面丢失，可从历史记录中找回；为防止再次发生，建议关闭“睡眠标签页”功能。 如果您在使用Edge浏览器时发现某些标签页被自动休眠导致内容消失或无法查看，这通常是由于“睡眠标签页”功能为了节省系统资源而将不活跃的标签页暂停。以下是恢复这些被休眠页面的操作方法…
-
MySQL慢查询到底是什么_怎样快速定位并修复它？
mysql慢查询可通过开启日志、分析日志和针对性优化快速定位修复。具体步骤：1. 修改配置文件或使用命令开启慢查询日志并设置阈值；2. 利用mysqldumpslow或pt-query-digest工具分析日志内容，找出耗时sql；3. 针对常见原因如缺少索引、sql写法不合理、数据量过大、锁竞争及…
-
HuggingFace的AI混合工具如何使用？开发AI模型的实用操作教程
HuggingFace的AI混合工具核心在于其生态系统设计，通过Transformers库的统一接口、Pipelines的抽象封装、Datasets与Accelerate等工具，实现多模型组合与微调。它允许开发者将复杂任务拆解，利用预训练模型如BERT、T5等，通过Python逻辑串联不同Pipel…
-
Java中高效查找时空事件重叠的方法
本文探讨了在Java中高效查找具有空间和时间范围定义的事件之间重叠的解决方案。核心思想是将时空事件编码为二维矩形，然后利用专业的空间索引结构（如R树、四叉树或PH树）进行快速查询。通过这种方法，可以显著提升在大规模数据集中识别事件重叠的效率，并提供了使用Tinspin索引库的示例代码和实践建议。 时…
-
怎么用VSCode编HTML_VSCodeHTML开发基础与实时预览设置教程
答案是配置Emmet、安装Live Server等插件并优化设置可大幅提升VSCode中HTML开发效率。具体包括：使用Emmet缩写快速生成HTML结构，如输入!后按Tab键生成完整HTML5模板；安装Live Server实现保存后浏览器自动刷新的实时预览；开启“保存时格式化”功能保持代码整洁；…
-
UC浏览器网页截图工具在哪里_UC浏览器网页截图功能入口
1、打开UC浏览器点击右上角三点菜单，查找“截屏”选项即可截图；2、部分版本支持双指下滑手势或通过分享功能保存为图片；3、建议更新至最新版以获取完整截图功能。 如果您在浏览网页时需要快速保存当前页面的内容，但找不到UC浏览器的截图功能入口，可能是由于界面更新或功能隐藏导致操作路径不明确。以下是找到并…
-
如何为iPhone12ProMax下载固件？快速获取方法分享
首先通过苹果官方开发者中心、第三方固件网站或iTunes/Finder获取iPhone 12 Pro Max的正确固件文件，确保来源可靠并校验完整性，再进行系统降级或修复操作。 如果您尝试为您的iPhone 12 Pro Max进行系统降级或修复系统错误，但无法找到合适的固件文件，则可能是由于下载渠…
-
开源 串口调试助手 BaoYuanSerial 使用教程「建议收藏」
大家好，很高兴再次与大家见面，我是你们的老朋友全栈君。 简介：本软件采用.Net5与Avalonia技术实现跨平台解决方案，适用于Linux Ubuntu和Windows系统，并已在Ubuntu20.04及Win10 Professional 20H2上成功测试。 官方下载地址： GitHub项目地…
-
一周学会蝴蝶号无人直播的完整课程计划推荐
掌握“蝴蝶号”无人直播的核心要义，一周内可搭建初步系统并具备独立操作能力。1.第一天厘清概念并完成基础环境搭建；2.第二天熟悉obs基础操作与场景构建；3.第三天准备高质量内容素材并确定风格；4.第四天设置自动化逻辑与推流配置；5.第五天处理互动机制及常见问题；6.第六天进行首次正式直播并复盘；7.…
-
MySQL如何处理长时间运行的查询_避免数据库阻塞？
诊断mysql慢查询需1.开启慢查询日志并设置long_query_time；2.使用explain分析sql执行情况；3.借助工具如pt-query-digest分析日志。优化涉及1.确保join字段有索引；2.优化join顺序及减少join表数；3.使用临时表、批量处理和数据分区。防止阻塞应1.…
-
tiktok网络使用链接 tiktok网页版入口地址
TikTok网页版入口地址在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来TikTok网页版入口地址，感兴趣的网友一起随小编来瞧瞧吧！ https://www.tiktok.com 1、提供多样化的短视频内容，涵盖生活记录、才艺展示等多个领域。 2、界面设计简洁直观，用户可以快速上手并流畅…
-
为“架构”再建个模：如何用代码描述软件架构？
在 archguard 平台中，为了实现对架构的治理，我们需要通过代码和模型来描述所需处理的内容和数据。因此，archguard 引入了代码模型、依赖模型、变更模型等，而架构模型和架构治理模型则是两个核心的部分。其它如构建模型等，将会在后续逐步引入到系统中。 PS：本文中的架构展开是基于自动化分析需…
