需要一个在每个ID上运行的脚本，而不仅仅是调用的最后一个ID

Question

所以我有一个任务管理器，它需要从数据库中提取数据。每个任务还需要显示一个模式及其详细信息。其中有一张带标记的地图。这就是我的问题所在。我的模态的本质是每个任务都有自己的模态。因此，这意味着映射必须在每个模态上有一个不同的id。

<?php
$sql = "SELECT * FROM tasks";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$id             = $row["id"];       
$task_name      = $row["task_name"];
$client_id      = $row["client_id"];
$priority       = $row["priority"];
$description    = $row["description"];
$assigned_to    = $row["assigned_to"];
$start_date     = $row["start_date"];
$due_date       = $row["due_date"];
$lat            = "-26.722804"; //this will need to change once i've figured out the $id issue
$lng            = "27.088537";
?>
<!-- View Modal -->
<div id="task-detail-modal-<?php echo $id; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="full-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-body p-t-0">
<div class="p-10 task-detail">
<div class="media m-t-0 m-b-20">
<div class="media-left">
<a href="#"> <img class="media-object img-circle" alt="64x64" src="assets/images/users/avatar-2.jpg" style="width: 48px; height: 48px;"> </a>
</div>
<div class="media-body">
<h4 class="media-heading m-b-5">
<?php 
$sql = mysqli_query($conn, "SELECT * FROM clients where id = $client_id");
while ($row = $sql->fetch_assoc()){
echo $row['contact'];
}
?>
</h4>
<?php 
$color = getAlert($priority);
$priority_text = getAlertText($priority);
echo '<span class="label label-'.$color.'">'.$priority.' - '.$priority_text.'</span>'
?>
</div>
</div>
<h4 class="font-600 m-b-20"><?php echo $task_name; ?></h4>
<p class="text-muted">
<?php echo $description; ?>
</p>
<ul class="list-inline task-dates m-b-0 m-t-20">
<li>
<h5 class="font-600 m-b-5">Start Date</h5>
<p> <?php echo $start_date; ?></small></p>
</li>
<li>
<h5 class="font-600 m-b-5">Due Date</h5>
<p> <?php echo $due_date; ?></small></p>
</li>
</ul>
<div class="clearfix"></div>
<div id="map-<?php echo $id; ?>" style="height: 400px; width: 100%"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light">Save Changes</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
function initMap() {
var v_lat = <?php echo $lat ?>;
var v_lng = <?php echo $lng ?>;
var v_mapID = 'map-'+<?php echo $id ?>;
alert(v_mapID);
var myLatLng = {lat: v_lat, lng: v_lng};
var map = new google.maps.Map(document.getElementById(v_mapID), {
zoom: 16,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
</script>
<?php
}
} else {
echo "0 tasks";
}
?>

脚本似乎只识别被调用的最后一个id，而不是遍历每个id。这意味着只有id的模态映射才能工作。如何让它为每个ID而不仅仅是最后一个ID运行脚本？

Answer 1

这应该可以解决问题。现在，在for循环中为每个id 创建一个新的映射

<script>
var maps = []
</script>
<?php
$sql = "SELECT * FROM tasks";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$id             = $row["id"];
$task_name      = $row["task_name"];
$client_id      = $row["client_id"];
$priority       = $row["priority"];
$description    = $row["description"];
$assigned_to    = $row["assigned_to"];
$start_date     = $row["start_date"];
$due_date       = $row["due_date"];
$lat            = "-26.722804"; //this will need to change once i've figured out the $id issue
$lng            = "27.088537";
?>
<!-- View Modal -->
<div id="task-detail-modal-<?php echo $id; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="full-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-body p-t-0">
<div class="p-10 task-detail">
<div class="media m-t-0 m-b-20">
<div class="media-left">
<a href="#"> <img class="media-object img-circle" alt="64x64" src="assets/images/users/avatar-2.jpg" style="width: 48px; height: 48px;"> </a>
</div>
<div class="media-body">
<h4 class="media-heading m-b-5">
<?php
$sql = mysqli_query($conn, "SELECT * FROM clients where id = $client_id");
while ($row = $sql->fetch_assoc()){
echo $row['contact'];
}
?>
</h4>
<?php
$color = getAlert($priority);
$priority_text = getAlertText($priority);
echo '<span class="label label-'.$color.'">'.$priority.' - '.$priority_text.'</span>'
?>
</div>
</div>
<h4 class="font-600 m-b-20"><?php echo $task_name; ?></h4>
<p class="text-muted">
<?php echo $description; ?>
</p>
<ul class="list-inline task-dates m-b-0 m-t-20">
<li>
<h5 class="font-600 m-b-5">Start Date</h5>
<p> <?php echo $start_date; ?></small></p>
</li>
<li>
<h5 class="font-600 m-b-5">Due Date</h5>
<p> <?php echo $due_date; ?></small></p>
</li>
</ul>
<div class="clearfix"></div>
<div id="map-<?php echo $id; ?>" style="height: 400px; width: 100%"></div>
<script>
maps.push({
mapContainer: 'map-'+<?php echo $id; ?>,
lat: <?php echo $lat; ?>,
lng: <?php echo $lng; ?>,
});
</script>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success waves-effect waves-light">Save Changes</button>
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php
}
} else {
echo "0 tasks";
}
?>

<script>
function initMap() {
for(var i = 0; i < maps.length; i++)
{
var myLatLng = {lat: maps[i].lat, lng: maps[i].lng};
var map = new google.maps.Map(document.getElementById(maps[i].mapContainer), {
zoom: 16,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
initMap();
</script>