1

这有点伪代码，所以编辑掉。我想在用户单击 DIV 内的拇指时使其#placeholder显示thumb2在#imageLoadDIV 内。注意：Thumb并且thumb2是 JSON 项目。很多人说这不能完成，getJSON因为它是一个异步请求。如果是这种情况，那么我该如何更改我的脚本以支持该请求？如果我走错了路，请提供替代解决方案。

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

    var image2 = "<img src=images/items/" + data.items[i].thumb2 + ".jpg>";
    $('li').click(function () {
        document.getElementById("imageLoad").innerHTML = output;
    });
});

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

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

2 回答 2

0

我认为这可以解决问题：

var $placeholder = $('#placeholder'),
    $imageLoad = $('#imageLoad');

$.getJSON('jsonFile.json', function(data) {
    var html = '<ul>';

    $.each(data.items, function(i,item){
        html += '<li><img src=images/items/' + item.thumb + '.jpg></li>';
    });        
    html += '</ul>';

    $placeholder.html(html);
});

$placeholder.on('click','li',function(){    
    $imageLoad.html($(this).html());
});

我无法理解 of 的用法，output因为您无论如何都没有声明它。事件的click事件处理程序将触发 的所有当前和未来li元素，$placeholder其中包含带有 的 DOMid对象placeholder。

于 2012-12-12T12:41:45.900 回答
0

您可以尝试以下方法：

$.getJSON('jsonFile.json', function(data)
{
  $("#placeholder").html("");
  var ul = $('<ul></ul>');
  $('#placeholder').append(ul);
  var load = $("#imageLoad");

  for(var i in data.items)
  {
    var li = $('<li></li>');
    ul.append(li);
    var img = $('<img>');
    img.attr("src", "images/items/" + data.items[i].thumb + ".jpg");
    img.click((function(x)
    {
      return function()
      {
        load.html("<img src=images/items/" + data.items[x].thumb2 + ".jpg>");
      }
    })(i));
    li.append(img);
  }
});

主要区别在于 click-handler 是在循环内分配的，因此每个处理程序都会收到一个带有对 thumb2 的适当引用的闭包。

于 2012-12-12T13:10:41.357 回答