Jquery .click函數訪問特定對象

Question

如果我有一個對象列表並使用.append（）將每個對象標題顯示爲li，並且當我點擊一個對象時，我想要在我的頁面上訪問並追加整個對象，我的目標是這樣的：

var object = { 
"post1" : { 
    "title" : "title1", 
    "content" : "blllsd", 
    "image" : "http://lorempixel.com/400/200/", 
    "latest" : false 
}, 
"post2" : { 
    "title" : "title2", 
    "content" : "blalbvlasd", 
    "image" : "http://lorempixel.com/700/200/", 
    "latest" : true 
}, 
"post4" : { 
    "title" : "title3", 
    "content" : "bla", 
    "image" : "http://lorempixel.com/900/400/", 
    "latest" : false 
    } 
}; 

的jQuery：

var result = $("#result"); 

    for (var key in object) { 
    if (!object.hasOwnProperty(key)) continue; 
    var element = object[key]; 
    }; 

var side = $("ul"); 
var latest = $("#latest") 
side.append("<li class='side'>" + element.title + "</li>"); 

$(".side").click(function() { 
    for (var i=0; i<element.length; i++) { 
      latest.prepend(element[i].title + element[i].content + element[i].image); 
     }; 
    }; 

這不要打印出任何東西，我不知道如何做到這一點。我讀過這個類似的帖子，但我沒有解釋我的問題，並且我覺得它有點過時，或者它只是我很難理解，所以如果專家能夠幫助，這將是一個很大的問題。 JavaScript closure inside loops – simple practical example 我搞砸了'這個'但沒有進展。

Answer 1

您可以按照片段所示的方式進行訪問。 您可以將該對象的key存儲到li。

var object = { 
 
"post1" : { 
 
    "title" : "title1", 
 
    "content" : "blllsd", 
 
    "image" : "http://lorempixel.com/400/200/", 
 
    "latest" : false 
 
}, 
 
"post2" : { 
 
    "title" : "title2", 
 
    "content" : "blalbvlasd", 
 
    "image" : "http://lorempixel.com/700/200/", 
 
    "latest" : true 
 
}, 
 
"post4" : { 
 
    "title" : "title3", 
 
    "content" : "bla", 
 
    "image" : "http://lorempixel.com/900/400/", 
 
    "latest" : false 
 
    } 
 
}; 
 
var result = $("#result"); 
 

 
var side = $("ul"); 
 
var latest = $("#latest") 
 
for (var key in object) { 
 
    if (!object.hasOwnProperty(key)) continue; 
 
    var element = object[key]; 
 
    side.append("<li class='side' key='" + key + "'>" + element.title + "</li>"); 
 
}; 
 

 
$(".side").click(function() { 
 
    var key = $(this).attr("key").trim(); 
 
    var obj = object[key]; //use this object data to populate your html 
 
    $(result).html(JSON.stringify(obj)); 
 
    //console.log(obj); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul></ul> 
 

 
<pre id="result"></pre>