-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

这是您的代码版本，其中包含一些更新：

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 ofdocument.getElementById() .innerHTML`。and
  11. 简化hashTag变量的设置并更改其名称以hash避免与函数名称混淆。
  12. 删除了函数定义末尾不必要的分号。
  13. 使缩进和格式更加一致。
  14. 缩短了过多的行长。

其中一些变化只是风格上的，但它们是我推荐的东西。当然，您可以在查看代码后从中进行选择。

重要的一点是确保json数据不仅在需要的地方可用，而且在需要的时候可用，而且不使用async:false.

于 2013-07-01T16:04:18.170 回答
0

如果我做对了，你需要变量json是全局的。刚开始就脱掉var，看看是否有帮助。

于 2013-07-01T15:34:29.997 回答
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 元素：如何使用 Javascript 访问 SVG 元素。需要从 <embed> 更改为 <object>

于 2013-07-01T15:54:49.853 回答