循环内模态框提交后如何传递$key显示加载动画？

步骤1：在循环中给元素绑定唯一标识 #

在Blade视图的foreach循环里，把$key通过data-*属性或ID绑定到按钮、模态框、表单和动画容器上，确保每个元素的标识唯一：

@foreach($backups as $key => $backup)
    {{-- 表格内的还原按钮 --}}
    <button type="button" class="restore-btn" data-key="{{ $key }}" data-bs-toggle="modal" data-bs-target="#restore-modal-{{ $key }}">
        还原备份
    </button>

    {{-- 对应key的还原模态框 --}}
    <div class="modal fade" id="restore-modal-{{ $key }}" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                {{-- 加载动画容器，默认隐藏 --}}
                <div id="animation-div-{{ $key }}" class="animation-div d-none">
                    {{-- 你的预定义加载动画 --}}
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>

                {{-- 还原表单，绑定当前key --}}
                <form action="{{ route('backups.restore', $backup->id) }}" method="POST" class="restore-form" data-key="{{ $key }}">
                    @csrf
                    {{-- 表单内容 --}}
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">确认还原</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

步骤2：通过JS捕获key并控制动画 #

根据你使用的JS方案，选择对应代码实现：

原生JS版本

// 监听所有还原表单的提交事件
document.querySelectorAll('.restore-form').forEach(form => {
    form.addEventListener('submit', function() {
        // 获取当前表单绑定的key
        const key = this.getAttribute('data-key');
        // 定位到对应key的动画容器
        const animationDiv = document.getElementById(`animation-div-${key}`);
        
        // 显示动画（移除隐藏类，添加自定义动画类）
        animationDiv.classList.remove('d-none');
        animationDiv.classList.add('your-loading-class'); // 替换为你定义的动画类
        
        // 可选：禁用提交按钮防止重复提交
        this.querySelector('button[type="submit"]').disabled = true;
    });
});

jQuery版本

$(document).on('submit', '.restore-form', function() {
    const key = $(this).data('key');
    const animationDiv = $(`#animation-div-${key}`);
    
    // 触发动画
    animationDiv.removeClass('d-none').addClass('your-loading-class');
    $(this).find('button[type="submit"]').prop('disabled', true);
});

扩展：异步提交后的动画处理 #

如果用AJAX异步提交表单，可在请求完成后移除动画：

form.addEventListener('submit', function(e) {
    e.preventDefault();
    const key = this.getAttribute('data-key');
    const animationDiv = document.getElementById(`animation-div-${key}`);
    const modal = document.getElementById(`restore-modal-${key}`);
    
    // 显示动画
    animationDiv.classList.remove('d-none');
    
    // 异步提交
    fetch(this.action, {
        method: this.method,
        body: new FormData(this)
    })
    .then(response => response.json())
    .then(data => {
        // 请求成功：隐藏动画、关闭模态框
        animationDiv.classList.add('d-none');
        bootstrap.Modal.getInstance(modal).hide();
    })
    .catch(error => {
        // 请求失败：隐藏动画
        animationDiv.classList.add('d-none');
    });
});

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