本文旨在解决在循环生成的表格中，点击每一行数据对应的链接，弹出模态框并展示该行特定数据的需求。通过JavaScript监听点击事件，动态更新模态框内容，实现数据的精准展示，避免所有模态框显示相同数据的常见问题。
问题分析
在循环中直接生成模态框，并为每个链接设置相同的data-target属性指向同一个模态框ID，会导致所有链接点击后都只会显示第一条数据。这是因为所有的链接都触发了同一个模态框，而模态框的内容在页面加载时就已经被填充为第一条数据。
解决方案：JavaScript动态加载模态框数据
核心思路是：
移除循环中模态框的直接生成：避免在 PHP 循环中重复生成具有相同 ID 的模态框。使用 JavaScript 监听链接点击事件：为每个链接添加一个唯一的标识，并通过 JavaScript 监听点击事件。动态更新模态框内容：在点击事件处理函数中，获取与链接关联的数据，并动态更新模态框的标题和内容。程序化地调用模态框：使用 JavaScript 代码来打开模态框。
具体步骤
1. 修改 PHP 代码
首先，修改 PHP 代码，移除循环中模态框的直接生成，并为每个链接添加一个唯一的标识（例如，使用 data-* 属性存储数据），并赋予一个通用的id，例如modalLauncher。
<a href="#" class="modalLauncher" data-case-type="" data-start-date="" data-end-date="" data-toggle="modal" data-target="#modal-default">
2. 编写 JavaScript 代码
接下来，编写 JavaScript 代码，监听链接的点击事件，并动态更新模态框的内容。
$(document).ready(function() { $(".modalLauncher").click(function(e) { e.preventDefault(); // 阻止链接的默认行为 // 获取数据 var caseType = $(this).data('case-type'); var startDate = $(this).data('start-date'); var endDate = $(this).data('end-date'); // 更新模态框标题和内容 $("#modal-title-default").text(caseType); $("#modal-body-content").html("Start Date: " + startDate + "
End Date: " + endDate + "
千博企业网站管理系统个人SQL版20120128 千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。 千博企业网站管理系统个人版特点： 1.全站模块化操作，静态标签调用，更强扩展性… 千博企业网站系统个人版是一套基于.Net + Access(SQL)建站管理系统软件、不依赖于服务商特定空间、不需安装任何空间商组
0 查看详情 
"); // 显示模态框 $("#modal-default").modal('show'); });});
代码解释:
$(“.modalLauncher”).click(function(e) { … });: 选择所有 class 为 modalLauncher 的元素（也就是你的链接），并为它们绑定点击事件。e.preventDefault();: 阻止链接的默认行为，避免页面跳转。$(this).data(‘case-type’);: 从当前点击的链接的 data-case-type 属性中获取数据。 $(this) 指的是当前点击的链接。$(“#modal-title-default”).text(caseType);: 使用获取到的 caseType 数据更新 id 为 modal-title-default 的元素（模态框标题）的文本内容。$(“#modal-body-content”).html(“
Start Date: ” + startDate + “
End Date: ” + endDate + “
“);: 使用获取到的 startDate 和 endDate 数据更新 id 为 modal-body-content 的元素（模态框内容）的 HTML 内容。 这里使用了简单的 HTML 格式，你可以根据需要自定义模态框内容的展示方式。$(“#modal-default”).modal(‘show’);: 以编程方式显示 id 为 modal-default 的模态框。
3. 引入 jQuery (如果尚未引入)
确保你的页面引入了 jQuery 库，因为上面的 JavaScript 代码使用了 jQuery。 你可以在 HTML 文件的
标签中添加以下代码：
4. 放置 JavaScript 代码
将 JavaScript 代码放在 HTML 文件的 标签之前，或者放在
标签内的 标签中，并确保在 jQuery 库之后加载。
注意事项
- 确保每个链接的 data-* 属性中存储了正确的数据。
- 根据实际需求，修改 JavaScript 代码，以适应不同的数据格式和模态框内容。
- 如果模态框无法正常显示，请检查 HTML 结构和 CSS 样式是否正确。
- 确保 jQuery 库已正确引入。
- 根据实际情况，调整 CSS 样式以美化模态框的显示效果。
- 如果数据量较大，可以考虑使用 AJAX 技术异步加载模态框内容，以提高页面加载速度。
总结
通过 JavaScript 监听点击事件，动态更新模态框内容，可以有效地解决循环生成的表格中，点击链接后模态框显示相同数据的问题。 这种方法灵活可扩展，可以应用于各种需要动态展示数据的场景。 记住，关键在于为每个链接添加唯一的标识，并使用 JavaScript 代码获取与链接关联的数据，并将其动态更新到模态框中。
以上就是基于模态框点击事件动态展示数据教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1324722.html
总结
通过 JavaScript 监听点击事件，动态更新模态框内容，可以有效地解决循环生成的表格中，点击链接后模态框显示相同数据的问题。 这种方法灵活可扩展，可以应用于各种需要动态展示数据的场景。 记住，关键在于为每个链接添加唯一的标识，并使用 JavaScript 代码获取与链接关联的数据，并将其动态更新到模态框中。
以上就是基于模态框点击事件动态展示数据教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1324722.html
微信扫一扫 
支付宝扫一扫 
