Laravel循环渲染Bootstrap Modal始终显示第一条内容如何解决

问题原因 #

你遇到的问题是HTML ID属性重复导致的：你在循环中给所有弹窗都设置了相同的id="exampleModal"，同时所有按钮的data-target都指向#exampleModal。HTML规范要求页面内ID必须唯一，浏览器识别到重复ID时只会匹配第一个出现的元素，因此无论点击哪个按钮都只会弹出第一条内容的弹窗。

解决方法1：给每个弹窗生成唯一ID（最简单改法） #

直接利用每条数据的唯一ID拼接弹窗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>
      <!-- 按钮指向带当前数据ID的弹窗 -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#drivingModal-{{ $driving->id }}">
        View more
      </button>
      <!-- 弹窗ID拼接当前数据ID，保证唯一 -->
      <div class="modal fade" id="drivingModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="drivingModalLabel-{{ $driving->id }}" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="drivingModalLabel-{{ $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>
      </div>
    </div>
  </div>
@endforeach

解决方法2：公用单个弹窗（性能更优） #

如果数据量很大，循环生成几十个弹窗会导致页面冗余，你可以只在页面写一个公共弹窗，点击按钮时动态把对应数据填入弹窗即可：

第一步：修改循环内的按钮，挂载需要的动态数据 #

@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>
      <!-- 按钮添加data-*属性存储当前条目的数据 -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#commonDrivingModal" 
        data-title="{{ $driving->title }}" 
        data-image="{{ Storage::url($driving->image) }}" 
        data-body="{{ $driving->body }}">
        View more
      </button>
    </div>
  </div>
@endforeach

第二步：在循环外写一个公共弹窗 #

<!-- 全局唯一的公共弹窗，放在循环外面 -->
<div class="modal fade" id="commonDrivingModal" tabindex="-1" role="dialog" aria-labelledby="commonDrivingModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="commonDrivingModalLabel"></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" id="modalImage" src="" />
      </div>
      <div class="modal-body" id="modalBody">
      </div>
    </div>
  </div>
</div>

第三步：添加JS代码，弹窗弹出时填充数据 #

$('#commonDrivingModal').on('show.bs.modal', function (event) {
  // 获取触发弹窗的按钮
  var button = $(event.relatedTarget)
  // 读取按钮上挂载的数据
  var title = button.data('title')
  var image = button.data('image')
  var body = button.data('body')
  // 把数据填入弹窗对应位置
  var modal = $(this)
  modal.find('.modal-title').text(title)
  modal.find('#modalImage').attr('src', image)
  modal.find('#modalBody').html(body)
})

内容的提问来源于stack exchange，提问作者user2519032