我在本地驱动器上有一个本地保存的JSON文件(仍然不知道如何使用服务器)。在那个JSON文件中,我有一个对象数组,如下所示:
[
{
"id" : 1,
"movieStill " : "<img src='imgsMovie/MovieFolder/Transformers/StillPhotoBackground.jpg'/>",
},
{
"id" : 2,
"movieStill " :" <img src='imgsMovie/MovieFolder/Lord of The rings/StillPhotoBackground2.jpg'/>",
},
]
我有两个对象,具有不同的ID和不同的img,在相同的属性名称下。现在,当我点击ID为1的项目时,我想显示背景图像。
$(document).ready(function() {
$.getJSON("js/appjson.json", function(data) {
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (key === "movieStill") {
$('.MovieInfo').append(
"<div class='imgStill'>" + data[i].movieStill + "</div>"
)
} else {
}
}
}
})
});
我想显示与点击的项目ID相对应的图像,但上面的代码显示两个图像。我该如何解决这个问题?
答案 0 :(得分:0)
$(document).ready(function() {
$.getJSON( "js/collectie.json", function(data) {
jsoncollectie = data;
})
$( "#collectie" ).click(function(){
console.log("click detected");
var data_id = $(this).attr("data-id");
console.log(thumb_id);
console.log(jsoncollectie);
for(var i = 0; i < jsoncollectie.length; i++){
if(jsoncollectie[i].id == data_id){
$( '.MovieInfo' ).append(
"<div class='imgStill'>" + jsoncollectie[i].img + "</div>"
)
}
}
});
});
请尝试这种方式,我希望这会对你有所帮助