让Javascript工作吗？$。ajax工作不正常？

因此，下面的Javascript代码似乎运行不正常

目标是让地图下方的文本在房间悬停时更改

我认为，提取数据的JSON zadias.me/SVG/rooms.JSON数据似乎是我的错。当我通过将.innerHTML语句放在文本字段中来测试/调试代码时，如果我将.innerHTML放在$.ajax之前，它就会工作，但是，如果我将.innerHTML函数放在.ajax的success部分，它就不会工作

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);
});

---

我知道它有点本地化，我怎样才能改变它呢？

如果我做对了，你需要变量json是全局的。只需去掉开头的var，看看是否有帮助。

您可能需要尝试以下内容：

// 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元素：。需要从更改为

以下是代码的一个版本，其中包含一些更新：

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
            );
        }
    });
}

我改变的是：

使json变量成为全局变量。 删除了async:true。千万别用那个！ 删除全局：false。您没有任何全局Ajax事件处理程序，因此此标志无效。 删除了$.ajax属性名称周围不必要的引号。 删除了代码末尾的事件处理程序设置。 在$.ajax回调中移动了该初始化，因为此时数据已准备就绪。 将$.active上的事件处理程序设置链接在一起，而不是重复选择器调用。 为简单起见，使用$.each代替for循环。 由于$each，将json.rooms[i]引用更改为room。 为了简单起见，再次使用了$'foo.htmlhtml而不是document.getElementById.innerHTML`。 简化了hashTag变量的设置，并将其名称更改为hash，以避免与函数名混淆。 删除了函数定义末尾不必要的分号。 使缩进和格式更加一致。 缩短了多余的线路长度。 其中一些变化只是风格上的，但我推荐它们。当然，在浏览代码之后，您可以从中进行选择

---

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

您能在这里发布相关代码吗？“async”：false，这是一个非常糟糕的主意。在ajax调用期间锁定浏览器。未捕获的TypeError:无法读取PresParkEisenhower2.svg第1行的null属性“style”。document.body.style导致了它。谢谢@Archer！我摆脱了它，我似乎没有看到任何改善@jfriend00我试着去掉“异步”：错，但似乎没什么作用。值得一试。我唯一能建议的是放入一些console.log语句来转储变量值并检查它们，或者使用调试器并逐步完成代码。我现在已经完成了。鼠标悬停仅返回id为svg的元素。看起来您无法按现在的方式选择房间。转到console并输入$.active。我对Javascript比较陌生，对console.log也不太熟悉。我会做一些研究，希望能有所帮助。谢谢你的帮助！通过进一步阅读，看起来很难以您尝试的方式解析svg元素。我会先用谷歌搜索一下。