如何将 foreach 的数据传递给模态窗口？

Question

这是我在 index.blade.php 中的代码

@foreach ($posts as $item)
  <!-- Someting -->
  <form name="f" method="POST" action="route...">
    @csrf
    @method('DELETE')
    <button class="modal-open"><i class="fas fa-edit"></i></button>
    <!-- Delete button... -->
  </form>
@endforeach

如何打开一个模态窗口，其中包含来自$item 的数据，我点击了编辑按钮而不是其他按钮？ （当我尝试代码时，总是给我第一个或最后一个 $item 的数据）

这里是模态窗口代码

<div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
        <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
            <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
            </svg>
            <span class="text-sm">(Esc)</span>
        </div>

        <div class="modal-content py-4 text-left px-6">
            <form name="form" action="route..." method="GET" class="mt-3">
                @csrf
                @method('POST')
                <br>
                <textarea class="bg-gray-300 rounded" name="mensaje" placeholder="{{Here the old data}}" required></textarea>
                <input type="hidden" name="foro_id" value="#">
                <input type="hidden" name="tema_id" value="#">
                <div class="mt-2">
                    <button type="submit" class="bg-green-300 p-1 rounded">Actualizar Post</button>
                </div>
            </form>
            <div class="flex justify-end pt-2">
                <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
                <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>
            </div>
        </div>
    </div>
</div>

谢谢大家，给您带来的不便深表歉意。

Answer 1

您必须使用 JavaScript 或 JQuery 将数据传递给模式。为方便起见，我使用的是 JQuery。对于 JQuery，我们需要执行以下操作-

在 index.blade.php 中

<button class="modal-open" data-item-foro-id="{{ $item->foro_id }}" data-item-tema-id="{{ $item->tema_id }}"><i class="fas fa-edit"></i></button>

//In Modal

............
<input type="hidden" name="foro_id" id="foro_id" value="#">
<input type="hidden" name="tema_id" id="tema_id" value="#">
............

JQuery 代码-

<script>
$(document).on("click", ".modal-open", function () {
    var foroId= $(this).attr('data-item-foro-id');
    var temaId= $(this).attr('data-item-tema-id');
    $("#foro_id").val(foroId);
    $("#tema_id").val(temaId);
});
</script>

注意：在这里，我提供了一个将值传递给两个输入字段的示例。如果您从中获得了灵感，您可以将任何值传递给模态。