来自 Laravel 循环的引导弹出窗口

Posted 2023-03-21

【中文标题】来自 Laravel 循环的引导弹出窗口

【英文标题】：Boostrap popup from a loop in Laravel

【发布时间】：2022-01-04 11:31:45

【问题描述】：

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

我已经使用 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

【参考方案1】：

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

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

假设您使用 id 来切换模式，您可以在按钮中执行以下操作：

data-target="#exampleModaldriving->id"

在模态中：

id="#exampleModaldriving->id"

【讨论】：

我只是想写那个

非常感谢！我刚改成“#exampleModal- $driving->id ”，它工作正常。 :)

【参考方案2】：

在刀片中使用 foreach 时这是一个很常见的问题

问题是您的所有模态 div 都具有相同的 id，因此您的代码仅检测到第一个带有它的 div。您必须为所有模态 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>

【讨论】：

感谢 back2lobby，问题已经解决，但也感谢您的回答。 +1 来自我 :)

他回复时我正在写这个答案 XD