Bootstrap模态框id为逗号分隔列表时jQuery触发失效问题

在WordPress环境下通过遍历逻辑生成多个Bootstrap模态框，每个模态框关联对应展位号的HTML锚点值。网格容器已绑定交互逻辑：带data-location属性的展位div被点击时，会获取对应展位号拼接为ID选择器，触发对应模态框弹出。
目前单ID的模态框可正常运行，但部分模态框的id属性值为逗号分隔的展位号列表，受当前项目结构限制无法修改该id命名规则，需适配现有逻辑让逗号分隔id的模态框也能被正常触发。

模态框触发逻辑 #

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".container1 > *[data-location]").click(function() {
        var booth = "#" + jQuery(this).data("location");
        jQuery(booth).modal({ show: false});
        jQuery(booth).modal('show');
        console.log(booth);
    }); 
});
</script>

展位网格代码片段 #

<div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
<div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
<div class="k12" id="k12" data-id="k12" booth-number=""></div>
<div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
<div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
<div class="k15" id="k15" data-id="k15" booth-number=""></div>
<div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
<div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
<div class="k18" id="k18" data-id="k18" booth-number=""></div>
<div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
<div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>

模态框示例 #

第一个为可正常触发的单id模态框，第二个为无法触发的逗号分隔多值id模态框

<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613"></div>
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712"></div>

原有逻辑失效的核心原因是：jQuery的ID选择器会将逗号识别为多选择器分隔符，无法直接匹配包含逗号、空格的ID值。不需要修改现有ID命名规则，只需调整选择器匹配逻辑，即可同时兼容单ID、逗号分隔多ID的模态框场景。

修复后的触发代码如下：

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".container1 > *[data-location]").click(function() {
        // 获取当前点击展位的编号，去除首尾多余空格
        const currentBooth = jQuery(this).data("location").trim();
        // 匹配对应模态框：兼容单id、逗号分隔（带/不带空格）的多id格式
        const $targetModal = jQuery(".modal").filter(function() {
            // 将模态框id按逗号拆分，逐个去除空格后匹配当前展位号
            const relatedBooths = this.id.split(',').map(boothCode => boothCode.trim());
            return relatedBooths.includes(currentBooth);
        });
        // 执行模态框弹出逻辑
        $targetModal.modal({ show: false });
        $targetModal.modal('show');
    }); 
});
</script>

• 逻辑说明：
  • 放弃直接拼接#生成ID选择器的写法，从根源避免逗号被误识别为选择器分隔符
  • 遍历所有模态框元素，将模态框ID按逗号拆分后清除首尾空格，只要拆分结果包含当前点击的展位号，就判定为目标模态框
  • 完全兼容原有单ID模态框的触发逻辑，无需修改已生成的模态框、展位DOM的任何属性

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