呼籲從表中的每個輸出的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元素。