在 foreach 循环中弹出加载模式

Question

我有一个从数据库中检索多行的查询。查询中的一列是注释，我想在模式弹出窗口中显示它。

我可以在 foreach 循环中将其设置为为每一行加载一个模式，但这意味着 x 数量的模式取决于行数。

有没有办法加载一个模态并将值（从 DB）传递给它，所以我不必有这么多模态。

这是我尝试过的，但就像我说它为每一行创建一个模式：

foreach($data as $row) { $id = $row['id']; ?>
<div class="modal fade" id="myModalnote<?php echo id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
            </div>
            <div class="modal-body">
                <?php 
                    $data = $conn->query('SELECT * FROM notes WHERE id = '.$id); 
                        foreach($data as $row) { 
                            echo '<p>'.$row['note'].'</p>';
                        }
                ?>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
}

有没有办法克服这个问题，只创建一个模式，然后将 $id 传递给它？

Answer 1

您应该有一个静态模式，并通过 javascript 在链接上单击更改其内容，例如在每一行中。您可以使用您的 ID 作为字段将注释收集到一个 JS 对象中。然后，您可以使用 data-* 属性在弹出链接中引用实际 ID。然后处理每个链接的点击，获取注释，将它们放入您的模态体中，并显示模态。

<div class="modal fade" id="myModalnote" tabindex="-1" 
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabelnote">Notes</h4>
      </div>
      <div class="modal-body">
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
  var notes = {};

<?php
  $data = $conn->query('SELECT * FROM notes WHERE id = '.$id);
  foreach($data as $row) {
    echo 'notes["'.$row['id'].'"] = "'.$row['notes'].'";';
  }
?>

$(document).on("click", ".noteslink", function() {
  var id = $(this).data("rowid");
  $("#myModalnote .modal-body").html(notes[id]);
  $("#myModalnote").modal("show");
});

</script>

<?php
  foreach($data as $row) {
    echo '<a class="noteslink" data-rowid="'.$row['id'].'">Show note for '.$row['id'].'</a>';
  }
?>

对不起，代码未经测试，但应该给你的想法。另请注意，虽然这种技术有效，但它远非最优雅和最精确的方式。例如，您应该考虑一些转义，以免在构造的 javascript 对象中导致 szntax 错误。

另一个好的解决方案是在循环中创建一个隐藏的 DIV，其中包含注释。然后 zou 可以使用基本相同的技术从事件处理程序中提取注释。