-3

そのため、以下にある Javascript コードが正しく機能していないようです。

目標は、マップの下のテキストを部屋の上に置くと変化するようにすることです。

地図ページ

データを取得する JSON (zadias.me/SVG/rooms.json) データに問題があるようです。テキスト フィールドに出力される .innerHTML ステートメントを配置してコードをテスト/デバッグする場合、.innerHTML を $.ajax の前に配置すると機能しますが、.innerHTML 関数を「成功」部分に配置すると機能します。 .ajaxの、それは動作しません..

Javascript:

$(document).ready(function(){
var json = (function () { //this function obtains the data
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) { 
            json = data;
        }
    });
    return json;
})();

function hashTag(){
    var hashTag, hash2;

    hashTag = location.hash; //obtains the part of the URL with the hash tag and what follows
    hashTag = hashTag.replace(/#*/, ''); //replaces the hash tag

    if(hashTag.length > 0){
        for(i=0 ; i<json.rooms.length ; i++){
            if (json.rooms[i].roomId == hashTag) //linear search through array of rooms to see if any equal the hashTag
            {
            document.getElementById('room_info').innerHTML = '<img src="images/' + json.rooms[i].image + '" /><h4>' + json.rooms[i].name + '</h4>' + json.rooms[i].HTMLdescrip;
            } //loads the data from the JSON data.
        }
    }
}; 

function setHash(){
    window.location.hash = this.id; //creates the hash link based on the object's id (object id acquired from the JSON data) and sets it
};

function setHTML(){
    for(i=0 ; i<json.rooms.length ; i++){
    if (json.rooms[i].roomId == this.id)
    {
    document.getElementById('room_info').innerHTML = '<img src="images/' + json.rooms[i].image + '" /><h4>' + json.rooms[i].name + '</h4>' + json.rooms[i].HTMLdescrip;
    }
  }
};

window.onload = hashTag();
$(".active").click(setHash);
$(".active").mouseenter(setHTML);
//$(".active").mouseover(setHTML);
$(".active").mouseleave(hashTag);
});

少しローカライズされていることは理解しています。これを変更するにはどうすればよいですか?

4

3 に答える 3

0

これらの行に沿って、さらに何かを試してみてください。

// this returns a promise
var json,
    response = $.ajax({
        'async': false,
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) { 
            json = data;
        }
    });

window.onload = function() {
    // ensures that the ajax has returned a value
    response.done(hashTag);
};

AJAX 要求を実行するために、ドキュメントの準備が整っている必要はありません。

SVG 要素にアクセスするには、こちらを参照してください: How to access SVG elements with Javascript。<embed> から <object> への変更が必要

于 2013-07-01T15:54:49.853 に答える
0

私が正しく理解している場合、変数jsonをグローバルにする必要があります。最初に取り外してvar、それが役立つかどうかを確認してください.

于 2013-07-01T15:34:29.997 に答える
0

いくつかの更新を加えたバージョンのコードを次に示します。

var json;

$(document).ready(function(){
    $.ajax({
        'global': false,
        'url': 'http://zadias.me/SVG/rooms.json',
        'dataType': "json",
        'success': function (data) {
            json = data;
            hashTag();
            $(".active")
                .click(setHash)
                .mouseenter(setHTML)
                .mouseleave(hashTag);
        }
    });
});

function hashTag(){
    //get everything in the URL after the #
    var hash = location.hash.replace(/#*/, '');

    if(hash.length > 0){
        //linear search through array of rooms to find the hashTag
        $.each( json.rooms, function( room ) {
            if (room.roomId == hash) {
                $('#room_info').html(
                    '<img src="images/' + room.image + '" /><h4>' +
                    room.name + '</h4>' + room.HTMLdescrip
                );
            } //loads the data from the JSON data.
        });
    }
};

 // creates the hash link based on the object's id
 // (object id acquired from the JSON data) and sets it
function setHash(){
    window.location.hash = this.id;
}

function setHTML(){
    $.each( json.rooms, function( room ) {
        if (room.roomId == this.id) {
            $('#room_info').html(
                '<img src="images/' + room.image + '" /><h4>' +
                room.name + '</h4>' + room.HTMLdescrip
            );
        }
    });
}

私が変更したこと：

  1. 変数をjsonグローバルにしました。
  2. を削除しましたasync:true。それは絶対に使わないでください！
  3. 削除されglobal:falseました。グローバルな Ajax イベント ハンドラーがないため、このフラグは効果がありません。
  4. $.ajax()プロパティ名の周りの不要な引用符を削除しました。
  5. コードの最後にあるイベント ハンドラーのセットアップを削除しました。
  6. データの準備が整ったときであるため、その初期化をコールバック内に移動しました。$.ajax()
  7. $(".active")セレクター呼び出しを繰り返す代わりに、イベント ハンドラーのセットアップを連鎖させました。
  8. 簡単にするために、ループの$.each()代わりに使用されます。for
  9. のおかげでjson.rooms[i]参照を変更しました。room$.each()
  10. $('#foo').html(html) instead of簡単にするために、再びdocument.getElementById() and.innerHTML` を使用しました。
  11. 変数の設定を簡素化し、関数名との混乱を避けるためにhashTag名前を に変更しました。hash
  12. 関数定義の末尾にある不要なセミコロンを削除しました。
  13. インデントとフォーマットの一貫性を高めました。
  14. 余分な行の長さを短くしました。

これらの変更のいくつかは単なるスタイル上のものですが、私が推奨するものです。当然、コードを調べた後、それらの中から選択して選択できます。

重要な点は、jsonデータが必要な場所だけでなく、必要なときに、.xml を使用せずに利用できるようにすることasync:falseです。

于 2013-07-01T16:04:18.170 に答える