时间戳

首页 > 解决方案 > Laravel 将 ID 分配给 Zurb Foundation 模式

laravel - Laravel 将 ID 分配给 Zurb Foundation 模式

问题描述

我目前正在为当地慈善机构（免费）制作 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

标签： laravelzurb-foundation

解决方案

根据id属性，一个元素在文档中是唯一的，但您editModal多次使用相同的 id ( )。您正在指示库使用ofReveal Modal打开模式，因此它会找到第一个（它预计是唯一的）并打开它。An应该只在文档中出现一次，否则您会遇到这样的意外行为。ideditModalid

  • id- 单个元素独有
  • class- 不是元素独有的

您可以通过为每个编辑模式赋予一个独特的 来解决此问题id，如下所示：

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

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

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

推荐阅读