Jquery .click関数が特定のオブジェクトにアクセスする

Question

オブジェクトリストがあり、すべてのオブジェクトタイトルをliとして表示するために.append（）を使用し、オブジェクトをクリックしたときにアクセスしたい、私のオブジェクトは、次のようになります。

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>