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

Question

我想使用确认模式删除选定的数据，但不知何故它只删除最新的数据而不是选定的数据。也许 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 循环 之外，并且您正在尝试访问模态框中的 $user 变量。此时，$user 变量包含 for 循环的最后一个元素，因为循环已经迭代。这就是为什么您总是删除最后一个用户的原因。

有 2 个选项:

1. 将模态代码放入循环中(这将为每个条目创建一个模态)
2. 最好只使用一种模式并更改值 动态地(就像你想做的那样)。但为此，您必须在点击方法中传递/构建正确的删除 URL

给你的表单一个像id="delete-form"这样的ID，然后在你的onclick方法中你可以动态地设置操作:

$('#delete-form').attr('action', '/users/' + delete_id);