PHP中$donnees['guid']变量无法在模态框正确传递的问题

问题根源 #

你在循环生成表格列时，给每个按钮对应的模态框都设置了相同的id="myModal"，而HTML中ID必须唯一。这就导致无论点击哪个按钮，浏览器只会找到第一个ID为myModal的模态框，所以始终显示第一行的$donnees["guid"]值。同时，把模态框放在循环内部会生成大量重复ID的无效HTML结构。

推荐解决方案：复用单个模态框（高效） #

只保留一个模态框，点击按钮时动态传递当前行的链接并填充到模态框中，避免重复HTML和ID冲突。

修改后的代码 #

1. 循环内的按钮部分

<div class="col-md-1" style="border: solid; text-align: center;">
  <?php var_dump($donnees['guid']); // 正常输出当前行链接 ?>
  <button type="button" class="btn btn-primary" onclick="openModal('<?php echo htmlspecialchars($donnees['guid']); ?>')">
    Open modal
  </button>
</div>

2. 单个模态框（放在循环外部）

<!-- 唯一的模态框，置于循环代码之外 -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框主体 -->
      <div class="modal-body">
        Vous êtes sur le point d'être redirigé pour visionner la sortie de pêche sur le nouveau site
        <span id="modal-link"></span>
      </div>
      <!-- 确认跳转区域 -->
      <div class="confirm-delete hide">
        <div class="modal-header">
          <h4 class="modal-title">Redirection Confirmée</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <p>Il se peut que la redirection prenne quelques secondes</p>
        <span id="confirm-link"></span>
        <div class="modal-footer1">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="redirect-btn">Ok</button>
        </div>
      </div>
      <!-- 模态框底部按钮 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button class="btn btn-danger" onclick="confirmDelete()">Ok on y va</button>
      </div>
    </div>
  </div>
</div>

3. 修正后的JavaScript函数

let currentLink = ''; // 存储当前要跳转的链接

function confirmDelete() {
  console.log("Préparation de la redirection...");
  $('.modal-header, .modal-footer, .modal-body').addClass('hide');
  $('.confirm-delete').removeClass('hide');
  // 填充确认区域的链接
  document.getElementById('confirm-link').textContent = currentLink;
}

function openModal(link) {
  currentLink = link;
  $('.confirm-delete').addClass('hide');
  $('#myModal .modal-header, .modal-footer, .modal-body').removeClass('hide');
  // 填充模态框主体的链接
  document.getElementById('modal-link').textContent = link;
  // 设置跳转按钮的点击事件（打开新窗口）
  document.getElementById('redirect-btn').onclick = function() {
    window.open(currentLink, '_blank');
  }
  $('#myModal').modal('show');
}

关键修改点说明 #

• 将模态框移到循环外部，避免重复ID和冗余HTML。
• 按钮点击时传递当前行的链接到openModal函数，用全局变量currentLink暂存。
• 修正跳转逻辑：原代码的window.location.href语法错误且会在当前窗口跳转，改用window.open打开新窗口，符合需求。
• 用<span>容器动态填充链接内容，确保每次打开模态框显示对应行的链接。

备选方案：给每个模态框设置唯一ID（不推荐） #

如果必须为每行保留独立模态框，需给每个模态框生成唯一ID（比如用数据的主键或循环索引），避免ID冲突。

示例代码 #

<?php 
// 假设$donnees包含唯一标识字段id，或用循环索引$i
$modalUniqueId = 'myModal-' . $donnees['id']; 
?>
<div class="col-md-1" style="border: solid; text-align: center;">
  <?php var_dump($donnees['guid']); ?>
  <button type="button" class="btn btn-primary" onclick="openModal('<?php echo $modalUniqueId; ?>')">
    Open modal
  </button>

  <!-- 唯一ID的模态框 -->
  <div class="modal" id="<?php echo $modalUniqueId; ?>">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          Vous êtes sur le point d'être redirigé pour visionner la sortie de pêche sur le nouveau site 
          <?php var_dump($donnees['guid']); ?>
        </div>
        <div class="confirm-delete hide">
          <div class="modal-header">
            <h4 class="modal-title">Redirection Confirmée</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <p>Il se peut que la redirection prenne quelques secondes</p>
          <?php var_dump($donnees['guid']); ?>
          <div class="modal-footer1">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.open('<?php echo $donnees['guid']; ?>', '_blank')">Ok</button>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
          <button class="btn btn-danger" onclick="confirmDelete('<?php echo $modalUniqueId; ?>')">Ok on y va</button>
        </div>
      </div>
    </div>
  </div>
</div>

对应修改的JavaScript #

function confirmDelete(modalId) {
  console.log("Préparation de la redirection...");
  $(`#${modalId} .modal-header, #${modalId} .modal-footer, #${modalId} .modal-body`).addClass('hide');
  $(`#${modalId} .confirm-delete`).removeClass('hide');
}

function openModal(modalId) {
  $(`#${modalId} .confirm-delete`).addClass('hide');
  $(`#${modalId} .modal-header, #${modalId} .modal-footer, #${modalId} .modal-body`).removeClass('hide');
  $(`#${modalId}`).modal('show');
}

注意事项 #

这种方案会生成大量重复的模态框HTML，页面加载速度和性能不如复用单个模态框的方案，仅在特殊场景下使用。

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