呼吁从表中的每个输出的onclick功能，无需每次都刷新

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> 

但我想这个calculateRoute（）函数从我的php代码中调用，我从表中填充。我想让每个表格元素成为一个链接，当它点击时它应该显示方向框。

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类，然后 行为时单击。它会计算出哪个地址存储在父元素wrapper内的 route-address元素中。该处理程序和 附加到表单元素的getRoute处理函数都会调用displayRoute ，它实际上会显示地图。

正如我在注释中提到，通过.parentNode找到wrapper元素是 脆弱的，如果你是在另一个 元素来包装route-name可能容易折断。重构代码以使用jQuery将使它更具弹性，并且更短一些。

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为我们做，只有当点击的元素是.route-name 元素时，只有 才会触发clickRoute处理程序。

在clickRoute的内部，.closest上升到DOM树，直到 它找到.wrapper元素。无论有多少 这些东西都可以包在.route-name之上，这将继续工作。之后，.find 向下钻取并找到.route-address元素。