Javascript 在jQuery中动态使用JSON变量

我有两个div，#placeholder和#imageLoad。当用户单击特定的拇指时，其较大的版本（拇指2）应显示在#imageLoad DIV中

以下是需要修复的jQuery：

  $.getJSON('jsonFile.json', function(data) {
        var output="<ul>";
        for (var i in data.items) {
            output+="<li><img src=images/items/" + data.items[i].thumb + ".jpg></li>";
        }
        output+="</ul>";
        document.getElementById("placeholder").innerHTML=output;
  });


  //This is wrong!! Not working..
  $('li').on({
         mouseenter: function() {
             document.getElementById("imageLoad").innerHTML="<img src=images/items/" +
             data.items[i].thumb2 + ".jpg>";
         }
  });    

---

变量数据仅在getJSON调用的回调函数中声明，因此在其他方法/事件处理程序中不可用。获取时将其存储到全局变量。如下图所示：

球形变种

$.getJSON('jsonFile.json', function(data) {
    globalData = data;
    var output="<ul>";
    for (var i in data.items) {
        output+="<li id=\"listItem" + i + "\"><img src=images/items/" + data.items[i].thumb + ".jpg></li>";
    }
    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
});


//This is wrong!! Not working..
$('li').on({
     mouseenter: function() {
         var index = parseInt($(this).attr('id').substring(8));
         document.getElementById("imageLoad").innerHTML="<img src=images/items/" +
         globalData.items[index].thumb2 + ".jpg>";
     }
});    

$.getJSON（'jsonFile.json'，函数（数据）{
globalData=数据；
var输出=“
”；
for（data.items中的var i）{
输出+=“
”；
}
输出+=“
”；
document.getElementById（“占位符”）.innerHTML=输出；
});
//这是错误的！！不工作。。
$（'li'）。在({
mouseenter:function（）{
var index=parseInt（$（this）.attr（'id'）.substring（8））；
document.getElementById（“imageLoad”）.innerHTML=“”；
}
});    

$.getJSON（'jsonFile.json'，函数（数据）{
var输出=“
”；
对于（变量i=0；i”；
}
输出+=“
”；
$（“#占位符”）.html（输出）；
$（'li'）。在({
mouseenter:function（）{
$（“#imageLoad”）.html（“”）；
}
});   
});

首先，

$.getJSON

是异步的，因此在异步函数之后的mouseenter绑定将不起作用，因为附加事件处理程序时，

li

元素不存在。其次，将第二个图像源存储在每个li元素的数据属性中，并在mouseenter函数中检索该数据属性：

$.getJSON('jsonFile.json', function(data) {
    var out = $("<ul />");
    for (var i in data.items) {
        $('<li />', {
            src: 'images/items/' + data.items[i].thumb + '.jpg'
        }).data('big', data.items[i].thumb2).appendTo(out);
    }
    $("#placeholder").html(out);
});

$('#placeholder').on('mouseenter', 'li', function() {
    var bigImg = $('<img />', {
        src: 'images/items/' + $(this).data('big') + '.jpg'
    });
    $("#imageLoad").html(bigImg);
});​

$.getJSON（'jsonFile.json'，函数（数据）{
var out=$（“
”）；
for（data.items中的var i）{
$（“
”{
src:'images/items/'+data.items[i].thumb+'.jpg'
}).data（'big'，data.items[i].thumb2）.appendTo（out）；
}
$（“#占位符”）.html（out）；
});
$（'#占位符'）。在（'mouseenter'，'li'，function（）上{
var bigImg=$（'这将不起作用，您在第二个代码块中有一个对'i'的引用。啊，是的，谢谢Hristo，已更新代码以包含ID，并在第二个函数中使用相同的ID。我如何将'i'重新用作引用？或者我可以做些什么来让鼠标指针工作？提前谢谢。请查看更新的代码。我在那里使用了i作为ID。因此，您可以从中提取i值并使用它。我将更新我的答案以使用更可靠的ID。这现在可以工作，但您并不需要全局变量来存储数据。只需按照我的示例将另一个缩略图作为属性存储到。创建新元素（ul）后使用jquery数据方法向其添加数据。然后，您可以在任何地方使用它。该链接使一些复杂的内容看起来很简单。您能否详细介绍数据，如何将其关联，或将其与其他jquery函数一起使用？你们三个人的答案似乎都不起作用。Adeneo，您能建议另一种解决方案吗？我对AJAX一无所知，但perhaps我需要声明Async:false？？我很困惑，但我知道这是一个简单的任务。任何输入都会很好，谢谢！@user1644123我已经更新了我的代码（在我自己的答案中）以在（）上使用$（'li'）AJAX调用回调中的事件，因此它现在应该可以工作，请尝试一下。我测试了您的更新Hristo，现在没有显示JSON数据。这似乎只会使前两项的悬停生效。JSON中接下来的所有内容都没有工作悬停。知道它为什么只工作两次吗？注意：我测试了，然后添加了更多JSON数据d再次测试。我更新了我的答案，我引用了数据。items[I]虽然我应该直接引用我。测试更新时唯一出现的是没有JSON数据的列表点。没有出现JSON。我不喜欢（…in…）循环中的这个，将它改为（；；）的标准它现在应该可以工作了，我已经把代码放在这里了，它可以工作了（在Firebug控制台中，你可以看到它正在尝试加载图像，尽管它们是404，但是在你的机器上它可以工作）-
$.getJSON('jsonFile.json', function(data) {
    var output="<ul>";
    for (var i = 0; i < data.items.length; i++) {
        output += "<li><img thumb2='" + data.items[i].thumb2 + "' src='images/items/" + data.items[i].thumb + ".jpg'></li>";
    }
    output += "</ul>";
    $("#placeholder").html(output);

    $('li').on({
        mouseenter: function() {
            $("#imageLoad").html("<img src='images/items/" + $(this).find('img').attr('thumb2') + ".jpg'>");
        }
    });   
});

$.getJSON('jsonFile.json', function(data) {
    var out = $("<ul />");
    for (var i in data.items) {
        $('<li />', {
            src: 'images/items/' + data.items[i].thumb + '.jpg'
        }).data('big', data.items[i].thumb2).appendTo(out);
    }
    $("#placeholder").html(out);
});

$('#placeholder').on('mouseenter', 'li', function() {
    var bigImg = $('<img />', {
        src: 'images/items/' + $(this).data('big') + '.jpg'
    });
    $("#imageLoad").html(bigImg);
});​