我需要一个在每个ID上运行的脚本，而不仅仅是最后一个调用的ID
我需要一个在每个ID上运行的脚本，而不仅仅是最后一个调用的ID
提问于 2019-11-01 18:11:20
所以我有一个任务管理器，它需要从数据库中提取数据。每个任务还需要显示一个包含其详细信息的模式。其中有一张带有记号的地图。这就是我的问题所在。我的模态的本质是每个任务都有自己的模态为其创建。因此意味着映射必须在每个模式上具有不同的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？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-01 18:25:44
这应该可以解决这个问题。现在，在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58657413
复制相关文章
相似问题
腾讯云开发者
