Laravel foreach循环中用JS为每个帖子生成独立ID触发模态框

HTML 规范要求页面内 id 属性全局唯一，你当前循环生成的按钮、模态框全部使用相同id，document.querySelector 匹配重复id时只会返回第一个匹配节点，因此点击任何按钮都只能唤起第一个模态框。

直接将帖子id拼接到元素id上保证全局唯一，同时避免在循环内重复编写JS逻辑，减少冗余代码。

循环内代码替换（外层@foreach($posts as $post) 内部） #

<button type="button" class="btn-open-modal" data-post-id="{{ $post->id }}">
    查看点赞用户
</button>

<dialog id="modal-{{ $post->id }}">
    <table>
        @foreach ($post->likers as $user)
            <tr>
                <td>
                    <a href="{{ route('profile', ['id' => $user->id]) }}">
                        <img class="rounded-md" style="width:50px; height:50px;" 
                        src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" />
                    </a>
                </td>
                <td>
                    <a href="{{ route('profile', ['id' => $user->id]) }}">
                        {{$user->name}}
                    </a>
                </td> 
            </tr>
        @endforeach
    </table> 
    <button class="btn btn-close-modal" data-post-id="{{ $post->id }}">
        关闭
    </button>
</dialog>

全局JS代码（放到页面底部，仅需编写1次，不要放在循环内） #

// 绑定所有打开按钮事件
document.querySelectorAll('.btn-open-modal').forEach(openBtn => {
    openBtn.addEventListener('click', () => {
        const targetModal = document.querySelector(`#modal-${openBtn.dataset.postId}`);
        targetModal.showModal();
    })
})

// 绑定所有关闭按钮事件
document.querySelectorAll('.btn-close-modal').forEach(closeBtn => {
    closeBtn.addEventListener('click', () => {
        const targetModal = document.querySelector(`#modal-${closeBtn.dataset.postId}`);
        targetModal.close();
    })
})

• 所有元素id通过{{ $post->id }}拼接后全局唯一，不会出现匹配冲突
• JS逻辑全局只加载一次，没有冗余代码

如果不想拼接id，可以完全移除id属性，通过DOM节点的相对位置匹配对应模态框，不需要依赖帖子id。

循环内代码替换 #

<button type="button" class="btn-open-modal">
    查看点赞用户
</button>

<dialog class="post-modal">
    <table>
        @foreach ($post->likers as $user)
            <tr>
                <td>
                    <a href="{{ route('profile', ['id' => $user->id]) }}">
                        <img class="rounded-md" style="width:50px; height:50px;" 
                        src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" />
                    </a>
                </td>
                <td>
                    <a href="{{ route('profile', ['id' => $user->id]) }}">
                        {{$user->name}}
                    </a>
                </td> 
            </tr>
        @endforeach
    </table> 
    <button class="btn btn-close-modal">
        关闭
    </button>
</dialog>

全局JS代码（仅需编写1次） #

document.querySelectorAll('.btn-open-modal').forEach(openBtn => {
    openBtn.addEventListener('click', () => {
        // 打开按钮的下一个相邻节点就是对应模态框
        openBtn.nextElementSibling.showModal();
    })
})

document.querySelectorAll('.btn-close-modal').forEach(closeBtn => {
    closeBtn.addEventListener('click', () => {
        // 向上查找最近的dialog父节点就是当前模态框
        closeBtn.closest('dialog').close();
    })
})

• 不需要拼接id、不需要自定义data属性，代码量更少
• 只要保持按钮和模态框相邻、关闭按钮在模态框内部的结构即可正常运行

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