Question

我正在编写代码，我在这里显示来自数据库的数据是我的代码：

   while ($resords = $sth->fetchAll()) {
        foreach ($resords as $value) {
            $sqno = $value["sqno"];
            $name = $value ["name"];
            $address = $value["address"];
     $list .= ' <div class="wrapper">
                   <div class="content-main">
                       <a onclick="calculateRoute()"  id="destination" style="text-decoration: none"><h3><strong >' . $name . '</a> </strong></h3>
                          <br></div>
                          <div class="content-secondary"> ' . $address . '</div>
                 </div><hr>';
}

它向我显示正确的数据列表但是当我点击链接时我没有得到正确的数据我的意思是当我从其他地方的按钮拨打电话时，当我得到正确的路线时，它没有显示我想要的正确路线。

这是我的calculateRoute（）..

function calculateRoute() {

    var start = document.getElementById('start').value;
    var destination = document.getElementById('destination').value;

    if (start == '') {
        start = center;
    }

    var request = {
        origin: start,
        destination: destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

这是我代码中的某个地方

 var selectBox = document.getElementById('destination');

   addOption(selectBox, data[i]['name'], data[i]['address']);

function addOption(selectBox, text, value) {
    var option = document.createElement("OPTION");
    option.text = text;
    option.value = value;
    selectBox.options.add(option);
}

当我从下拉列表中选择任何元素时，它正好。

 <label for="start">Location : </label>
                        <input type="text" class="form-control" id="start" >

                        <label for="destination">Destination : </label>
                        <select class="form-control" id="destination" onchange="calculateRoute();"></select>
                        <div class="pull-right">
                            <input class="btn btn-primary" type="button" value="Display Directions" style="margin-top: 20px" onclick="calculateRoute();">
                        </div>

但是我希望从我的php代码中调用computeRoute（）函数，我从table.i中填充它想要使每个表元素成为一个链接，当它点击它时它应该显示方向框。

Answer 1

我想我明白你要做什么。看起来你有一个输入框，用户可以在其中键入起点，他们可以选择一个选择框从中选择一个目的地。这可以，但你也希望他们能够单击路径列表中的路径名称并显示相同的地图从表单中选择它？

我已经改变了生成路由列表的HTML，给出了一点点事情更有意义的名字。您的原始代码游戏列表中的每个项目 id destination的元素。 id每次都必须是唯一的您调用getElementById，该页面中id的第一个元素是。{ 总是回来。

我没有将新的事件处理程序附加到列表中的每个项目使用event delegation，这将减少内存消耗，并使代码有点短。我在那里进行事件授权的方式实际上并不需要给路由列表中的任何项目id。

<label for="start">Location : </label>
<input type="text" class="form-control" id="start" >

<label for="destination">Destination : </label>
<select class="form-control" id="destination"></select>
<div class="pull-right">
<input id="get-route" class="btn btn-primary" type="button" value="Display Directions" style="margin-top: 20px">
</div>

<?php

while ($resords = $sth->fetchAll()) {
  foreach ($resords as $value) {
    $sqno = htmlentities($value["sqno"]);
    $name = htmlentities($value ["name"]);
    $address = htmlentities($value["address"]);
    $list .= <<<HEREDOC
<div class="wrapper">
  <div class="content-main">
    <h3 class="route-name">$name</h3>
  </div>
  <div class="content-secondary route-address">
    $address
  </div>
</div>
<hr>
HEREDOC;
  }
}

$list = '<div class="route-list">' . $list . '</div>';

echo $list;

如您所见，包含路径名称的元素和一个元素保存该路由的地址获得语义上重要的类。这将允许我们遍历DOM以根据位置查找地址你点击的名字是。您还会注意到我使用过 htmlentities XSS保护。它是逃避任何用户生成的内容很重要。我通常喜欢逃避我从数据库中取出的任何东西，如果有人，这将保护你妥协你的数据库并设法将一些恶意标记加入其中。

var doc = document,
  elStart = doc.getElementById('start'),
  elDestination = doc.getElementById('destination'),
  displayRoute =  function (start, destination) {
    var request;
    if (start === '') {
        start = center;
    }
    request = {
      origin: start,
      destination: destination,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  },
  getRoute = function () {
    displayRoute(elStart.value, elDestination.value);
  },
  clickRoute = function (event) {
    var target = event.target,
      destination,
      row;

    if (target.classList.contains('route-name')) {
      row = target.parentNode.parentNode; // Gets the "wrapper" that this
                                                // "route-name" is inside of.
                                                // This is a bit fragile, if any
                                                // nodes are inserted between
                                                // route-name and wrapper it
                                                // will break. To make this less
                                                // fragile, you could use
                                                // jQuery's .closest() method
                                                // instead of pure-DOM methods.
      destination = row.querySelector('route-address').textContent;
      displayRoute(elStart.value, destination);
    }
  };

doc.querySelectorAll('.route-list').addEventListener('click', clickRoute, false);
doc.querySelector('#get-route').addEventListener('click', getRoute, false);
elDestination.addEventListener('change', getRoute, false);

此代码使用event delegation 将一个事件处理程序附加到具有类route-list的每个元素。这个侦听器侦听具有route-name类的元素的点击，然后单击一个时动作。它确定了存储在哪个地址父route-address元素内的wrapper元素。这个处理程序和附加到表单元素的getRoute处理程序都调用displayRoute 实际上显示地图。

正如我在评论中指出的那样，通过wrapper找到.parentNode元素是如果你要将route-name包裹在另一个中，那么它很容易破碎元件。重构代码以使用jQuery会使它更具弹性和a 更短。

var $ = jQuery,
  elStart = $('#start'),
  elDestination = $('#destination'),
  displayRoute =  function (start, destination) {
    var request;
    if (start === '') {
        start = center;
    }
    request = {
      origin: start,
      destination: destination,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  },
  getRoute = function () {
    displayRoute(elStart.val(), elDestination.val());
  },
  clickRoute = function (event) {
    var row = $(this).closest('wrapper'),
      destination = row.find('.route-address').text();
    displayRoute(elStart.val(), destination);
  };

$('.route-list').on('click', '.route-name', clickRoute); // Passing the
                                                         // .route-name
                                                         // selector does the
                                                         // event delegation.
$('#get-route').on('click', getRoute);
elDestination.on('change', getRoute);

附加.route-list的事件处理程序时，.on method为我们执行委派逻辑， if语句不需要过滤要检测的类名如果点击是在.route-name孩子上，jQuery会为我们而且只为我们做如果点击的元素是clickRoute，则触发.route-name处理程序元件。

在clickRoute内，.closest上升到DOM树，直到它找到一个.wrapper元素。无论多少，这将继续工作你可以回顾.route-name的事情。之后，.find 向下钻取并找到.route-address元素。

为表中的每个输出调用onclick函数，而不是每次刷新

1 个答案: