Laravel 将 ID 分配给 Zurb Foundation 模态

Question

我目前正在为当地的慈善机构（免费）制作 CMS，我正在使用 Laravel 5.6 以及 Zurb foundation 6.4。这是我第一次使用 Laravel，但我真的很喜欢它，我快用完了。

但是，我有一些小问题，需要在部署之前解决，一些指导会有很大帮助。我坚持为我的模态分配动态 ID 以进行更新。我的控制器、路线和模型都很好。我可以使用模式从 table 更新第一条记录，并且按预期工作。

问题是，无论我是否单击触发器，在不相关的行上始终显示第一条记录。我尝试使用 Blade 将 category_id 传入，但这不起作用，我得到相同的结果或错误。我可以看到问题出在哪里，但我不知道如何解决。我想我需要一些 jQuery and/or Ajax 我试过了，但无济于事（我对 JS 很垃圾）。

正如我所说，我的 MVC 很健全，我可以更新第一行，我所需要的只是能够将 category_id 动态分配给 data-open 属性。我将在下面 post 我的代码，感谢您花时间阅读本文。

@foreach ($categories as $category)
        <tr>
            <td>{{ $category->name }}</td>
            <td>{{ $category->posts->count() }}</td>
            <td align="center"><a data-open="editModal"><i class="fas fa-edit fa-lg" style="color: green"></i></a></td>
            <td align="center">
                <a href="{{ route('category.delete', ['id' => $category->id]) }}"><i class="fas fa-trash-alt fa-lg" style="color: red"></i></a>
            </td>
        </tr>

        <div class="reveal" id="editModal" data-reveal>
            <h3>Edit: {{ $category->name }}</h3>
                <form action="{{ route('category.update', ['id' => $category->id]) }}" method="post">
                    {{ csrf_field() }}
                    <label for="name">Category Name</label>
                        <input type="text" name="name" value="{{ $category->name }}">
                    <button class="button expanded success fullRadiusButton" type="submit">Update Category</button>
                    <a href="{{ route('categories') }}" class="close-button" aria-label="Close modal"><i class="fas fa-window-close"></i></a>
                </form>
        </div>
    @endforeach

Answer 1

基于 id 属性的文档中的元素是唯一的，但您多次使用相同的 ID (editModal)。您正在指示 Reveal Modal 库打开带有 editModal 的 id 的模式，以便它找到第一个（它预计是唯一的）并打开它。 id 应该只在文档中出现一次，否则您会遇到像这样的意外行为。

id - 单个元素唯一
class - 元素不唯一

您可以通过给每个编辑模式一个唯一的 id 来解决这个问题，就像这样：

<div class="reveal" id="editModal_{{ $category->id }}" data-reveal>

然后在你的触发器中引用唯一的 id:

<a data-open="editModal_{{ $category->id }}">

Laravel 将 ID 分配给 Zurb Foundation 模态

Laravel assigning the ID to a Zurb Foundation modal

laravel

zurb-foundation