如何将数组中特定位置数据传递至Modal弹窗？

我有一个位置信息数组，用户点击对应的卡片时，需要弹出Modal弹窗展示该位置的专属数据，请问如何将该位置的数据传递至Modal弹窗？

用户提供的初始代码：

<!-- Card -->
<div class="locationCard" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#exampleModal" >
 <div class="locationText">
    <?php echo $slide['title']; ?>
 </div>
 <?php echo '<img class="cardImage" >' . wp_get_attachment_image( $slide['image'], $size = 'medium',["class" => "cardImage","alt"=>"some"]) . '</img>'; ?>
</div>

<!-- Modal -->
<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"><?php echo $slide['title']; ?></h5>
      </div>
      <div class="modal-body">
          ...
      </div>
   </div>
</div>
</div>

解决方案：利用Bootstrap Modal事件+自定义Data属性 #

这是最直接的实现方式，适合数据量不大的场景：

1. 修改卡片代码，添加自定义Data属性 #

给每个locationCard添加存储位置数据的data属性，合并重复的class属性，同时用esc_attr()转义属性值避免语法问题：

<div class="locationCard btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#exampleModal"
     data-location-id="<?php echo $slide['id']; ?>"
     data-location-title="<?php echo esc_attr($slide['title']); ?>"
     data-location-desc="<?php echo esc_attr($slide['description'] ?? ''); ?>">
 <div class="locationText">
    <?php echo $slide['title']; ?>
 </div>
 <?php echo wp_get_attachment_image( $slide['image'], 'medium', ["class" => "cardImage","alt"=>$slide['title']] ); ?>
</div>

注：移除了多余的<img>标签包裹，wp_get_attachment_image本身会输出完整的img标签。

2. 修改Modal结构，预留动态替换标记 #

将Modal内的静态内容替换为可动态更新的元素，给需要替换的区域添加ID：

<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="modalLocationTitle"></h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
          <p id="modalLocationDesc"></p>
          <div id="modalLocationImage"></div>
      </div>
   </div>
</div>
</div>

3. 添加JavaScript监听Modal事件 #

利用Bootstrap Modal的show.bs.modal事件，在弹窗显示前从触发卡片中提取数据并更新Modal内容：

$('#exampleModal').on('show.bs.modal', function (event) {
  // 获取触发弹窗的卡片元素
  const button = $(event.relatedTarget);
  // 从data属性提取数据
  const locationTitle = button.data('location-title');
  const locationDesc = button.data('location-desc');
  const locationImageSrc = button.find('.cardImage').attr('src');

  // 更新Modal内容
  const modal = $(this);
  modal.find('#modalLocationTitle').text(locationTitle);
  modal.find('#modalLocationDesc').text(locationDesc);
  modal.find('#modalLocationImage').html(`<img src="${locationImageSrc}" class="img-fluid" alt="${locationTitle}">`);
});

进阶方案：全局数据数组+ID索引 #

如果位置数据字段较多，直接存在data属性中过于繁琐，可将所有位置数据转为JSON存入全局变量：

1. PHP输出全局数据数组 #

在页面头部添加：

<script>
const locationData = <?php echo json_encode($yourLocationArray); ?>;
</script>

2. 卡片仅存储位置ID #

<div class="locationCard btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#exampleModal"
     data-location-id="<?php echo $slide['id']; ?>">
 <!-- 卡片内容不变 -->
</div>

3. JS通过ID获取完整数据 #

$('#exampleModal').on('show.bs.modal', function (event) {
  const button = $(event.relatedTarget);
  const locationId = button.data('location-id');
  // 从全局数组匹配对应数据
  const location = locationData.find(item => item.id == locationId);

  if (location) {
    const modal = $(this);
    modal.find('#modalLocationTitle').text(location.title);
    modal.find('#modalLocationDesc').text(location.description);
    modal.find('#modalLocationImage').html(`<img src="${wp_get_attachment_image_url(location.image, 'medium')}" class="img-fluid" alt="${location.title}">`);
    // 其他字段可按需添加
  }
});

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