Question

这有些伪代码所以编辑了。我希望在用户点击#placeholder内的拇指时进行设置，然后在thumb2 DIV中显示DIV #imageLoad。注意：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"
    }
]}

Answer 1

我认为这可以解决问题：

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

我无法理解output的使用，因为您无论如何都没有声明它。 click事件的事件处理程序将触发li的所有当前和未来$placeholder元素，其中包含id placeholder的{{1}}的DOM对象。< / p>

Answer 2

您可以尝试以下内容：

$.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的适当引用的闭包。

在jQuery中使用JSON变量来显示更多JSON变量

2 个答案: