我有來自回圈的內容，我在網格框中顯示標題和影像。此外，在每個內容框中，我都有查看更多按鈕，當用戶單擊時，它會在彈出視窗中顯示完整內容（標題、影像、正文）。
我已經使用 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 hljs-string">">
{{ $driving->title }}
</div>
<button type="button" hljs-string">" 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">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div hljs-string">">
{!! $driving->body !!}
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
uj5u.com熱心網友回復：
您在每次迭代中都針對相同的 id #exampleModal。所以，每個按鈕都有相同的目標 id #exampleModal。
因此，解決方案是將其附加到當前的駕駛 ID。
假設您使用 id 來切換模式，您可以在按鈕中執行以下操作：
data-target="#exampleModal{{driving->id}}"
在模態中：
id="#exampleModal{{driving->id}}"
uj5u.com熱心網友回復：
在 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 hljs-string">" id="exampleModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div hljs-string">" role="document">
<div hljs-string">">
<div hljs-string">">
<h5 hljs-string">" id="exampleModalLabel-{{ $driving->id }}">{{ $driving->title }}</h5>
<button type="button" hljs-string">" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div hljs-string">">
<img hljs-string">" src="{{ Storage::url($driving->image) }}" />
</div>
<div hljs-string">">
{!! $driving->body !!}
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367073.html
標籤：php 拉拉维尔 bootstrap-4 引导模式