如何分配JSON变量到外部jQuery函数

Question

我在DIV中显示JSON项目的列表。如何在盘旋时在第二个DIV中重新显示 中的特定物品。

现在，脚本会打印：“+ data.items [i] .title +”逐字，而不是实际显示值。

在下面的脚本中可以更改什么？提前致谢。

注意：这是一个不同的问题，我以前的，因为它处理文本，而不是图像。

$.getJSON('1zONE.json', function(data) { 
    globalData = data; 
    var output="<ul>"; 
    for (var i in data.items) { 
     output += "<li><h1>" + data.items[i].title + "</h1>" + data.items[i].price + "--" + data.items[i].description.one+"</li>"; 
    } 
    output += "</ul>"; 
    $("#placeholder").html(output); 


    $('li').on({ 
     mouseenter: function() { 
     document.getElementById("placeholder2").innerHTML=" + data.items[i].title + "; 

     } 
    }); 
}); 

这里是JSON文件（1zONE.json）：

{"items":[ 
     { 
      "id":"1", 
      "thumb":"01_sm", 
      "thumb2":"01_md", 
      "title":"Ray", 
      "price":"Villalobos", 
      "description": { 
       "one":"January", 
       "two":12, 
       "three":2012 
      } 
     }, 
     { 
      "id":"2", 
      "thumb":"02_sm", 
      "thumb2":"02_md", 
      "title":"John", 
      "price":"Jones", 
      "description": { 
       "one":"April", 
       "two":28, 
       "three":2010 
      } 
     }, 
     { 
      "id":"3", 
      "thumb":"03_sm", 
      "thumb3":"03_md", 
      "title":"Jo", 
      "price":"Jo", 
      "description": { 
       "one":"May", 
       "two":8, 
       "three":2010 
      } 
     }, 
     { 
      "id":"4", 
      "thumb":"04_sm", 
      "thumb3":"04_md", 
      "title":"Jo4", 
      "price":"Jo4", 
      "description": { 
       "one":"May4", 
       "two":84, 
       "three":20104 
      } 
     } 
]} 

Answer 1

你搞砸了引号，这样的：

document.getElementById("placeholder2").innerHTML=" + data.items[i].title + "; 

应该是这样的：

document.getElementById("placeholder2").innerHTML = data.items[i].title; 

，因为它在jQuery事件处理程序中，所以它可能会更容易要做到：

$("#placeholder2").html(data.items[i].title); 

编辑：

为了解决不是持久的迭代值的问题，你需要一个封闭的，所以我想我会写吧？

$.getJSON('1zONE.json', function(data) { 
    globalData = data; 
    var ul = $('<ul />'); 

    for (var key in data.items) { 
     (function(j) { 
      var li = $('<li />'), 
       h1 = $('<h1 />', {text: data.items[j].title}); 

      li.append(h1).append(data.items[j].price + "--" + data.items[j].description.one).on('mouseenter', function() { 
       $('#placeholder2').html(data.items[j].title); 
      }).appendTo(ul); 
     })(key); 
    } 
    $("#placeholder").html(ul); 
});​