Laravel 循环中的 Bootstrap 弹出窗口

Question

我有来自循环的内容，我在网格框中显示标题和图像。此外，在每个内容框中我都有查看更多按钮，当用户点击时，它会在弹出窗口中显示完整内容（标题、图片、body）。

我已经用 Bootstrap 模态进行了测试，弹出功能可以正常工作，但是当我从第一个框或第二个框中单击“查看更多”时，弹出框始终显示第一个框中的内容。

我该如何解决这个问题，以便当用户点击第二个框中的“查看更多”时，显示第二个框中的完整内容？

每个内容也有来自数据库的 ID 参数，例如第一个框的 ID 为 1，第二个框的 ID 为 2，那么如何根据内容的 ID 过滤弹出窗口？

这是我的代码：

@foreach($drivings as $driving)
  <div class="col-sm-3">
    <div class="box-inner">
      <div class="image">
        <img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
      </div>
      <div class="title">
        {{ $driving->title }}
      </div>
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        View more
      </button>
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">{{ $driving->title }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="image">
              <img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
            </div>
            <div class="modal-body">
              {!! $driving->body !!}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endforeach

Answer 1

您在每次迭代中定位相同的 ID #exampleModal。因此，每个按钮都有相同的目标，id 为 #exampleModal.

所以解决方案是在其上附加当前驾驶 ID。

假设你使用 id 来切换模式，你可以在按钮中做这样的事情：

data-target="#exampleModal{{driving->id}}"

并且在模态中：

id="#exampleModal{{driving->id}}"

Answer 2

在 blade 中使用 foreach 时很常见的问题

问题是您的所有模态 div 都具有相同的 ID，因此您的代码仅检测到第一个带有它的模态。您必须为所有模式 div 和按钮视图提供不同的 ID。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-{{ $driving->id }}">
    View more
  </button>
  <div class="modal fade" id="exampleModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel-{{ $driving->id }}">{{ $driving->title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="image">
          <img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
        </div>
        <div class="modal-body">
          {!! $driving->body !!}
        </div>
      </div>
    </div>

Laravel 循环中的 Bootstrap 弹出窗口

Boostrap popup from a loop in Laravel

php

laravel

bootstrap-modal

bootstrap-4