需要一个在每个 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";                        ?>脚本似乎只识别被调用的最后一个 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>