javascript - 使用确认模式删除数据

Question

我想用 confirmation modal 删除选定的数据但不知何故它只删除最新的数据而不是选定的数据。也许 JavaScript 有问题逻辑，但我似乎找不到任何错误。
这是我的完整代码:
Controller :

public function destroy($id) {
    User::find($id)->delete();

    return redirect('usercontrol')->with('status', 'User successfully deleted!');
}

查看 :

<tbody>
    @foreach ($users as $user)
        <tr>
            <th scope="row">
                {{ $user->id }}
            </th>
            <td>
                {{ $user->first_name }} {{ $user->last_name }}
            </td>
            <td>
                {{ $user->email }}
            </td>
            <td>
                {{ $user->role }}
            </td>
            <td>
                {{ $user->created_at }}
            </td>
            <td>
                <a href="users/{{ $user->id }}/edit" class="badge btn-success">
                    <i class="fas fa-edit" style="color:white"></i>
                </a>
                <a href="{{ '#' }}" class="delete-modal badge btn-danger" data-value="{{ $user->id }}" data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-trash-alt" style="color:white"></i>
                </a>
            </td>
        </tr>
    @endforeach
</tbody>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content shadow-sm">
            <form action="/users/{{ $user->id }}" method="POST" class="d-inline">
                @method('delete')
                @csrf
                <div class="modal-body">
                    <h3 class="text-center">Are you sure?</h3>
                </div>
                <div class="modal-footer justify-content-around pt-0 border-top-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger" name="delete_user">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript :

$(document).ready(function (e) {
    $(document).on("click", ".delete-modal", function (e) {
        var delete_id = $(this).attr('data-value');
        $('button[name="delete_user"]').val(delete_id);
    });
});

Answer 1

问题是您的模态超出了您的 for loop并且您正在尝试访问 $user模态中的变量。此时的$user变量包含 for 循环的最后一个元素，因为您的循环已经迭代。这就是为什么您总是删除最后一个用户的原因。
有2个选项:

将您的模态代码放入循环中(这将为每个条目创建一个模态)

只有一个模态并更改值是一种很好的做法
动态地(就像你想做的那样)。但是为此，您必须在点击方法中传递/构建正确的删除 URL

给你的表单一个 ID，如 id="delete-form"之后在您的 onclick 方法中，您可以动态地设置操作: $('#delete-form').attr('action', '/users/' + delete_id);