1

jqueryでコードを書きました。最初は実行していなかったので、オンラインのjslintで構文エラーをチェックしました。私はいくつかのエラーをキャッチしました。今でもコードは期待どおりに機能していませんでした。だから私はfirebugに行きました。私は多くのデバッグを行っていません。私はそれに慣れていません。これが私のコードです

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 ファイルからデータを取得して、2 次元配列の distance[][] 内に保存することです。最後に、すべてのデータを保存した後、「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

デバッグする最も簡単な方法は、スクリプトの特定のポイントでFirebugとconsole.log()変数またはメッセージを使用することです。これにより、スクリプトのさまざまなステップで何が起こっているかをよりよく理解できます。Firebugの[コンソール]タブで出力を確認できます。

他のいくつかのタブからブレークポイントとウォッチを追加することもできます。たとえば、[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 に答える