如何分配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); 
});​