本文介绍如何通过 jQuery 为多个编辑按钮复用同一个模态框，并根据点击目标动态设置输入框的初始值与标签文本，避免硬编码、提升可维护性。
本文介绍如何通过 jQuery 为多个编辑按钮复用同一个模态框，并根据点击目标动态设置输入框的初始值与标签文本，避免硬编码、提升可维护性。
在构建可折叠题库、FAQ 管理或配置项编辑界面时，为每个条目单独编写模态框不仅冗余，还难以维护。理想方案是：共用一个模态框，点击不同“编辑”按钮时，自动填充对应预设内容。关键在于建立「触发源 → 数据映射」关系，并在点击事件中动态更新 DOM。
✅ 推荐实现方式：数据驱动 + 语义化属性
不再为每个按钮写独立 click 处理器（如 $("#edit1").click(...)），而是统一监听带标识的元素，通过 data-* 属性关联数据源：
<!-- 编辑按钮统一添加 data-question-id -->
<li id="one">
<div class="collapsible-header"><span>Question 1</span></div>
<div class="collapsible-body">
<span>What is your given name?</span>
<a href="#editModal" class="modal-trigger" data-question-id="one">✏️ Edit</a>
</div>
</li>
<li id="two">
<div class="collapsible-header"><span>Question 2</span></div>
<div class="collapsible-body">
<span>What is your surname?</span>
<a href="#editModal" class="modal-trigger" data-question-id="two">✏️ Edit</a>
</div>
</li><!-- 复用模态框（精简版） -->
<div id="editModal" class="modal">
<div class="modal-content">
<h4>Edit Question</h4>
<div class="input-field">
<input type="text" id="modalQuestionInput" />
<label for="modalQuestionInput">Question:</label>
</div>
<button class="btn modal-close" id="saveBtn">Save</button>
</div>
</div>$(document).ready(function() {
// 预设问题数据（可来自 API 或初始化脚本）
const presetQuestions = {
one: "What is your given name?",
two: "What is your surname?"
};
// 统一监听所有编辑按钮
$('.modal-trigger[data-question-id]').on('click', function(e) {
e.preventDefault();
const questionId = $(this).data('question-id');
const questionText = presetQuestions[questionId] || "";
// 动态更新模态框内控件
$('#modalQuestionInput').val(questionText);
// （可选）同步更新 label 文本或 placeholder
});
// 【进阶】保存时获取当前编辑的 ID（需额外存储上下文）
$('#saveBtn').on('click', function() {
const currentId = $('.modal-trigger.active').data('question-id') ||
$('.modal-trigger:focus').data('question-id');
const newValue = $('#modalQuestionInput').val().trim();
if (currentId && newValue) {
// 更新 DOM 显示（示例：更新 collapsible-body 中的 span）
$(`#${currentId} .collapsible-body span`).text(newValue);
// 同步更新 presetQuestions 对象（如需持久化）
presetQuestions[currentId] = newValue;
M.toast({html: 'Question updated!'});
}
});
});⚠️ 注意事项与最佳实践
- 避免 ID 冲突：确保 data-question-id 值全局唯一，推荐使用有意义的字符串（如 q1, contact_email），而非纯数字。
- 空值防护：访问 presetQuestions[questionId] 前务必检查是否存在，否则 .val(undefined) 会清空输入框。
- 状态隔离：若用户快速连续点击不同条目，建议在模态框打开前重置输入框，或使用 one() + off() 防止事件重复绑定。
- 无障碍支持：为
- 扩展性提示：将 presetQuestions 替换为 AJAX 请求（如 $.get('/api/questions/' + id)），即可支持服务端动态加载。
✅ 总结
复用模态框的核心逻辑是：解耦 UI 触发器与业务数据。通过 data-* 属性传递上下文，配合集中式数据对象（或 API），即可实现高内聚、低耦合的交互设计。此模式不仅适用于问题编辑，还可延伸至用户资料、产品配置、多语言文案等任意需要「一对多动态填充」的场景。
