如何实现点击不同ID/Class的Div打开对应ID的Dialog？

核心思路 #

要避免重复写绑定代码，关键是建立点击元素和目标Dialog的关联关系，下面提供几种灵活的实现方式：

方案一：使用自定义数据属性（推荐，最灵活） #

通过HTML的data-*属性直接标记点击元素对应的Dialog ID，无需依赖命名规则，新增元素时只需添加属性即可。

1. 修改HTML结构

给每个触发点击的元素添加data-dialog属性，值为对应Dialog的ID：

<div id="id01" class="dialog-trigger" data-dialog="itemDetails">打开详情1</div>
<div id="id02" class="dialog-trigger" data-dialog="itemDetails2">打开详情2</div>
<div id="id03" class="dialog-trigger" data-dialog="itemDetails3">打开详情3</div>

<div id="itemDetails" class="dialog">Dialog内容1</div>
<div id="itemDetails2" class="dialog">Dialog内容2</div>
<div id="itemDetails3" class="dialog">Dialog内容3</div>

2. 优化JS代码

绑定所有带有data-dialog属性的元素，点击时读取属性值找到对应Dialog：

// 绑定所有触发元素的点击事件
$('body').on('click', '[data-dialog]', function() {
    // 获取当前元素对应的Dialog ID
    const targetDialogId = $(this).data('dialog');
    // 初始化并触发Dialog
    const dlg = new DialogFx($(`#${targetDialogId}`).get(0));
    dlg.toggle();
});

方案二：基于ID命名规则关联 #

如果点击元素和Dialog的ID有统一命名规律（比如id01对应itemDetails1），可以直接通过ID提取关联信息，无需额外属性。

1. 保持HTML命名规则

<div id="id01">打开详情1</div>
<div id="id02">打开详情2</div>
<div id="id03">打开详情3</div>

<div id="itemDetails1" class="dialog">Dialog内容1</div>
<div id="itemDetails2" class="dialog">Dialog内容2</div>
<div id="itemDetails3" class="dialog">Dialog内容3</div>

2. 编写关联逻辑

// 绑定所有ID以"id"开头的元素
$('body').on('click', '[id^="id"]', function() {
    // 从点击元素ID中提取数字部分（比如id01提取"1"）
    const num = $(this).attr('id').replace('id', '');
    // 拼接对应Dialog的ID
    const targetDialogId = `itemDetails${num}`;
    // 初始化并触发Dialog
    const dlg = new DialogFx($(`#${targetDialogId}`).get(0));
    dlg.toggle();
});

性能优化：提前初始化所有Dialog #

如果Dialog数量较多，建议提前初始化所有Dialog并缓存，避免每次点击重复初始化：

// 缓存已初始化的Dialog对象
const dialogCache = {};
// 提前初始化所有Dialog
$('.dialog').each(function() {
    dialogCache[this.id] = new DialogFx(this);
});

// 点击事件直接调用缓存的Dialog
$('body').on('click', '[data-dialog]', function() {
    const targetDialogId = $(this).data('dialog');
    dialogCache[targetDialogId].toggle();
});

内容的提问来源于stack exchange，提问作者pfx