Javascript 在jQuery中使用JSON变量可以显示更多JSON变量

这是一些伪代码，所以请编辑掉。我想在用户单击占位符DIV中的thumb时，thumb2显示在imageLoad DIV中。注意：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;
    });
});

---

我认为这可以做到：

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

---

我无法理解输出的用途，因为您没有在中声明它。click事件的eventhandler将在$placeholder的所有当前和未来li元素上触发，该元素包含id为placeholder的DOM对象。

您可以尝试以下操作：

$.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处理程序是在循环内部分配的，因此每个处理程序都会收到一个包含对thumb2的适当引用的闭包。

您是否尝试了发布的代码？乍一看，它看起来不错，除了for..in循环应该是data.items上的常规for，输出应该是image1，然后是image2。可能违反KISS范式：PYes，我发布了这个脚本。它可以很好地打印无序列表，但是mouseOnclick函数不能处理这些变量。mouseOnClick只有在我将JSON变量交换为实际元素时才起作用。我想你的意思是img.clickfunctionx{return function{load.html…}i@teddybeard你错了。您需要将当前i作为已执行函数的参数传递，以便在闭包中捕获它。我的代码已经过测试了。嗯，看起来这确实可行，但是现在我遇到了一个bug。。JSON文件中打印的最后一个列表项有3个未加载其thumb2？？前两个李是干什么的。有什么想法吗？似乎第三项单击的变量松动了。@user1644123可能是数据输入错误。添加console.log只是为了确保已调用处理程序并具有适当的URL。我应该在脚本中的何处添加console.log？在…之前还是之后？？谢谢。我测试了这个，现在它在占位符DIV中没有显示任何内容

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