將JavaScript更改爲jQuery不起作用

我找到this教程，關於添加計算兩個位置之間距離的地圖。它效果很好。這裏的問題是它是用原始JavaScript編寫的，而不是jQuery。將JavaScript更改爲jQuery不起作用

當我包含jQuery並更改例如「document.getElementById('txtSource')」由「$('#txtSource')」它將無法正常工作。

這裏是原代碼：http://pastebin.com/BKqgYWEw

這是我編輯的代碼：http://pastebin.com/ZrK7cSAb

這裏有什麼建議？

謝謝。

來源

2016-06-20 medk

什麼沒有工作？如何在沒有真正通過你的代碼的情況下猜測它呢？ – Rayon

你有包含jQuery插件嗎？ –

@Rayon ok我將包括整個代碼 – medk

這就像@ssube說：你傳遞一個jQuery對象不是一個DOM節點。我嘗試通過使用JQuery對象遍歷DOM並將正確的DOM節點元素傳遞給API來完成想要的操作。請參閱下面的工作液：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <style type="text/css"> 
 
     body 
 
     { 
 
      font-family: Arial; 
 
      font-size: 10pt; 
 
     } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
 
    <script> 
 
     var source, destination; 
 
     var directionsDisplay; 
 
     var directionsService = new google.maps.DirectionsService(); 
 
     google.maps.event.addDomListener(window, 'load', function() { 
 
      new google.maps.places.SearchBox($('#txtSource').get(0)); 
 
      new google.maps.places.SearchBox($('#txtDestination').get(0)); 
 
      directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true }); 
 
     }); 
 

 
     function GetRoute() { 
 
      var mumbai = new google.maps.LatLng(18.9750, 72.8258); 
 
      var mapOptions = { 
 
       zoom: 7, 
 
       center: mumbai 
 
      }; 
 
      map = new google.maps.Map($('#dvMap').get(0), mapOptions); 
 
      directionsDisplay.setMap(map); 
 
      directionsDisplay.setPanel($('#dvPanel').get(0)); 
 

 
      //*********DIRECTIONS AND ROUTE**********************// 
 
      source = $('#txtSource').val(); 
 
      destination = $('#txtDestination').val(); 
 

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

 
      //*********DISTANCE AND DURATION**********************// 
 
      var service = new google.maps.DistanceMatrixService(); 
 
      service.getDistanceMatrix({ 
 
       origins: [source], 
 
       destinations: [destination], 
 
       travelMode: google.maps.TravelMode.DRIVING, 
 
       unitSystem: google.maps.UnitSystem.METRIC, 
 
       avoidHighways: false, 
 
       avoidTolls: false 
 
      }, function (response, status) { 
 
       if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != 'ZERO_RESULTS') { 
 
        var distance = response.rows[0].elements[0].distance.text; 
 
        var duration = response.rows[0].elements[0].duration.text; 
 
        var dvDistance = $('#dvDistance'); 
 
        dvDistance.html(''); 
 
        dvDistance.html('Distance: ' + distance + '<br>'); 
 
        dvDistance.html('Duration:' + duration); 
 

 
       } else { 
 
        alert('Unable to find the distance via road.'); 
 
       } 
 
      }); 
 
     } 
 
    </script> 
 
    <table border="0" cellpadding="0" cellspacing="3"> 
 
     <tr> 
 
      <td colspan="2"> 
 
       Source: 
 
       <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" /> 
 
       &nbsp; Destination: 
 
       <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" /> 
 
       <br /> 
 
       <input type="button" value="Get Route" onclick="GetRoute()" /> 
 
       <hr /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <div id="dvDistance"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <div id="dvMap" style="width: 500px; height: 500px"> 
 
       </div> 
 
      </td> 
 
      <td> 
 
       <div id="dvPanel" style="width: 500px; height: 500px"> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <br /> 
 
</body> 
 
</html>

來源

2016-06-20 14:01:51 n0m4d

感謝您的答案，但這裏沒有問題，源和目標的自動完成功能不再有效。 – medk

我剛修復它，請再次運行代碼。隨意標記這個問題的答案=） – n0m4d

jQuery選擇器和DOM元素不是一回事。你根本無法像這樣傳遞一個選擇器。但是，您可以使用get method從選擇器獲取元素。

console.log(document.getElementById('test').constructor, $('#test').constructor, $('#test').get(0).constructor);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test"></div>

來源

2016-06-20 13:46:41 ssube

將JavaScript更改爲jQuery不起作用

回答

相關問題