Question

我有一个未编号的列表，其中每个列表项通过html被赋予数据id，并且我在json中有一个数组，其中包含与列表项一样多的对象。每个列表项对应于json中的特定对象。

当我点击列表项时，我想在html中显示相应的对象。

这就是我到目前为止：Fiddle（免责声明：第一次使用jquery＆amp; json，我用20多个打开的标签中找到的信息制作了这个脚本）

因此，在结果中，当我点击列表项时，大图片，标题，描述性文本和较小的图像都应该更改为正确的。

以下是小提琴的代码：

HTML：

<section id="collectie" class="twopane">
    <ul>
        <li data-id="item1"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item2"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item3"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item4"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item5"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item6"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item7"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item8"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item9"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item10"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item11"><img src="http://lorempixel.com/125/125/"></li>
        <li data-id="item12"><img src="http://lorempixel.com/125/125/"></li>
    </ul>
</section>

<section id="detail" class="twopane">

    <img class="detailimage" src="http://lorempixel.com/400/400/">
    <div>
        <h4>Title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <img class="secondaryimage" src="http://lorempixel.com/125/125/">

</section>

使用Javascript：

$(document).ready(function() {

var jsoncollectie = $.getJSON( "js/collectie.json", function() {
})

jsoncollectie = jsoncollectie.responseJSON["stoelen"];

$( "#collectie li" ).click(function(){
    console.log("click detected");
    var thumb_id = $(this).data("id");
    console.log(thumb_id);

    for(i=0;i<Object.keys(jsoncollectie).length;i++){
        var jsonid = jsoncollectie.title;
        console.log("jsonid:" + jsonid);
        if(jsonid===thumb_id){
            $(this).find('img').attr('src', jsoncollectie.image);
        }
    }


});

});

JSON：

{
"stoelen":
[
    {"title": "item1", "image": "images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "images/grid/7.png"},
    {"title": "item2", "image": "images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "images/grid/6.png"},
    {"title": "item3", "image": "images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "images/grid/7.png"},
    {"title": "item4", "image": "images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "images/grid/6.png"}
]
}

我遇到的主要问题是我可以加载json但似乎无法访问数组。提前致谢，随时提出更多问题！

Answer 1

取决于完整的解决方案，您可以使用列表行的索引来查找数据中的行：

$( "#collectie li" ).click(function(){

  var thumb_index = $(this).index();
  var dataObject = jsoncollectie[thumb_index];
  $(this).find('img').attr(src, dataObject.image);

});

不要将Object.keys用于数组。使用array.forEach或for（var x = 0; x＆lt; array.length; x ++）

Answer 2

首先，您没有正确访问data-attr。

其次，您不是通过索引访问数组。另外，没有必要迭代id。相反，你可以从你的data-id attr中删除字符串的“item”部分，然后你会得到一个类似字符串的整数。这是将parseInt()转换为整数的地方，从而允许我们在数组中查找数据的索引。 javascript中的所有数组和索引都从0开始，因此对于data-id属性中的slice()项，我们使用slice(3)

修改要迭代数组，然后查看数据id是否等于数组中的标题，请使用：

$( "#collectie li" ).click(function(){ console.log("click detected"); var data_id = $(this).attr("data-id"); for(var i = 0; i < jsoncollectie.length; i++){ if(jsoncollectie[i].title == data_id){ $(this).children('img').attr('src', jsoncollectie[i].image); return; } }

}）;

基本上for循环正在计数并针对data_id尝试每个标题，直到找到匹配或到达数组的末尾。如果找到匹配则函数终止。

Answer 3

一位IRL朋友帮我完成了代码，这是我现在使用的javascript / jquery，它完美无缺。

$(document).ready(function() {

$.getJSON( "js/collectie.json", function(data) {
    jsoncollectie = data;
})

$( "#collectie li" ).click(function(){

    console.log("click detected");
    var thumb_id = $(this).data("id");
    console.log(thumb_id);
    console.log(jsoncollectie);

    for(var i = 0; i < jsoncollectie.stoelen.length; i++){

        if(jsoncollectie.stoelen[i].title == thumb_id){
            $("#detailimage").attr('src', jsoncollectie.stoelen[i].image);
            console.log(jsoncollectie.stoelen[i]);
        }   

    }

});


});

通过jquery在html中显示json中的特定对象

3 个答案: