0

我有两个 DIV，#placeholder 和 #imageLoad。当用户单击特定拇指时，其较大的版本 (thumb2) 应出现在#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>";
         }
  });

这是下面的外部 JSON 文件 (jsonFile.json)：

{"items":[
    {
        "id":"1",
        "thumb":"01_sm",
        "thumb2":"01_md"
    },
    {
        "id":"2",
        "thumb":"02_sm",
        "thumb2":"02_md"
    }
]}
4

3 回答 3

1 
$.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'>");
        }
    });   
});
于 2012-12-12T10:52:12.163 回答
0

您的变量数据仅在 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>";
     }
});
于 2012-12-12T10:48:29.470 回答
0

首先，是异步的，因此在附加事件处理程序时元素不存在$.getJSON，因此在 async 函数之后的 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);
});​
于 2012-12-12T11:01:43.720 回答