1

我用jquery写了一段代码。我最初没有运行，然后我检查了在线jslint的语法错误。我发现了一些错误。现在代码仍然没有按预期工作。所以我去了萤火虫。我没有做很多调试。我是新手。这是我的代码

var j = 2;
var friends = [];
var distance =[];


$(document).ready(function () {

      $('#button').click(function () {
        if (j < 11) {
            $('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
            j++;
        }
        else {
            alert("Limit reached");
        }
    });



   $('button').click(function(){
  console.log("button clicked");
   var a =[];
    for(i=1;i<=j;i++)
     {
        a[i] = $("#friend" + i).val();
      }     


    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
        "origins=" +
        a.join('|').replace(/ /g,'+') +
        "&destinations=" +
        a.join('|').replace(/ /g,'+') +
        "&sensor=false";


  jQuery.ajax(
          {
             type: "GET",
             url: gurl,
             dataType: 'jsonp'
          }).done(function (response) 
             {
                var rows = response.rows;
                  alert("hello there");

                for (var i = 0; i < rows.length; i++) 
                 {

                  for(var j=0;j<elements.length;j++)
                {
                    distance[i][j] = rows[i].elements[j].distance;
                 }

                 }
          alert(distance[1][3]);
              });

        });
  });

现在，它应该做的是转到此链接并从 json 文件中获取数据并将其存储在二维数组 distance[][] 中。最后在存储完所有数据后，它应该显示“距离[1][2]”的结果作为警报。

现在我不知道这段代码有什么问题以及如何使用 firebug 找到逻辑错误。什么应该让我的工作变得轻松？

ps：这是HTML文件

<!doctype html>
<html>

 <head>

    <title>TakeMeHome</title>

    <script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>


 </head>

  <body>
    <center>
        <form id="locations">
        Your Place:<input id="source" type="text"><br/>
        <br/>

        <div id="friends">
         Friend1:<input id="friend1" type="text"><br/>
        <br/>
        </div>

        <div id="button">
            Add!</div>
        <br/>
        <br/>

        <button>GO!</button>

        <br/><br/>
        <div id="map" style = "width: 500px; height: 500px"><br/>

        </form>
    </center>

  </body>

</html>
4

2 回答 2

1

最简单的调试方法是console.log()在脚本中的某些点使用 firebug 和变量或消息，以便您可以更好地了解脚本各个步骤中发生的情况。您可以在 firebug 的 Console 选项卡中看到输出。

您还可以从其他一些选项卡添加断点和监视。例如，在 DOM 选项卡中，您可以右键单击变量并添加监视，或者从脚本选项卡中单击脚本中的位置以设置断点或监视，它将在该点停止脚本和/或在那一点上显示一个变量的转储。

于 2013-01-26T15:10:10.640 回答
1

嘿，这里是您的代码的一个工作小提琴，以及一些调试 js 的方法示例：

http://jsfiddle.net/QxP7p/3/

如您所见，您可以做一些不错的事情，例如：

console.log("distance : ");
console.log(distance);

希望能帮助到你

他们也有一些错误，无法帮助修复它们

于 2013-01-26T16:04:15.723 回答