Question

我目前正在为当地的慈善机构（免费）制作CMS，并且我使用Laravel 5.6和Zurb foundation 6.4。这是我第一次使用Laravel，但我真的非常喜欢它并且我差不多完成了。

然而，在我部署它之前，我需要修复一些小问题，一些指导会有所帮助。我一直坚持为我的模态分配动态ID，以便更新。我的控制器，路线和型号都很好。我可以使用模态更新表中的第一条记录，并按预期工作。

问题是，无论我是否在不相关的行上单击触发器，它始终是显示的第一条记录。我尝试使用Blade传递category_id，但这不起作用，我得到相同的结果或错误。我可以看到问题所在，但我不知道如何解决它。我想我需要一些jQuery和/或Ajax而且我已经尝试了，但没有用（我用JS做垃圾）。

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

@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库使用id editModal打开模态，以便找到第一个（它预期是唯一的一个）并打开它。 id只能在文档中出现一次，否则您会遇到类似的意外行为。

id - 对于单个元素而言是唯一的
class - 不是元素独有的

您可以通过为每个编辑模式提供唯一的id来解决此问题，如下所示：

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

然后在您的触发器中引用该唯一id：

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

Laravel将ID分配给Zurb Foundation模态

1 个答案: