Question

我正在制作一个网站，主要容器分为两个50％的一半。左侧是缩略图，右侧是点击缩略图的详细视图。详细视图存储在json中。这是我第一次写“我自己的”jquery并且可以使用一些帮助！

这是我到目前为止所做的：

$(document).ready(function() {

var collectie = $.getJSON( "js/collectie.json", function() {
    console.log( "Got collection" );
    console.log(collectie);
})

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

        console.log("click detected");

    var thumb_id = $(this).data("id");

        console.log(thumb_id);

    var stoel_id = $(collectie).data(thumb_id);

        console.log(stoel_id);


});

});

我仍然需要制作将数据放入html的部分，但首先我想确保在var或其他内容中获得正确的数据。一位朋友告诉我，我应该先将json存储在var中，这样就不必加载每次点击事件。然后我尝试通过选择与thumb_id匹配的collectie中的数据，将正确的数据存储在stoel_id中。现在这就是我迷路的地方。我知道我的语法可能很可怕，但我试图用我发现的30多个打开的信息标签将它组合在一起。

所以我想做的是：

加载json（已完成）
在缩略图上放置了一个点击事件检查器（已完成）
从html（已完成）获取thumb_id
从json获取与thumb_id相对应的数据（需要帮助！）
将该数据放入html（我想我可以这样做）

这是我正在使用的JSON：

{
"stoelen":
    [
        {"title": "Stoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
        {"title": "Stoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"},
        {"title": "Hogestoel1", "image": "/images/stoelen/1.png", "description": "Hier komt de beschrijving van de eerste foto", "secondaryimage": "/images/grid/7.png"},
        {"title": "Hogestoel2", "image": "/images/stoelen/2.png", "description": "Hier komt de beschrijving van de tweede foto", "secondaryimage": "/images/grid/6.png"}
    ]
}

请不要犹豫，要求提供更多信息，并提前致谢！

修改

thumb_id是html中data-id-tag的内容，它与json中的“title”相同。像这样的可点击列表项：

<ul>
        <li data-id="stoel1"><img src=""></li>
</ul>

Answer 1

试试这个，

for(i=0;i<collectie.stoelen.length;i++)
{
   var  jsonid= collectie.stoelen[i].title;
    if(jsonid===thumb_id)
       {
           $(this).find('img').attr('src',collectie.stoelen[i].image);

       }
}

Answer 2

尝试（此模式）

var request = function (q) {
    var url = "js/collectie.json";
    var el = arguments[0];
    var q = $.makeArray($(arguments[0]).data("id"));
    var dfd = new $.Deferred();
    var results = [];
    request._notify = function(args) {
      return $.each(arguments, function(k, v) {
        console.log(v)
      });
    };
    $.getJSON(url
    , function (data, textStatus, jqxhr) {
        console.log("Got collection", data, q[0]);
        $.each((data[Object.keys(data)]), function (k, v) {
            if (String(v["title"]).toLowerCase() === q[0]) {
                results.push(v);
                dfd.notify(["'" + q[0] + "'" 
                            + " found in collection"
                            , results[0]
                            , $(".clicked").size() + 1]);
                dfd.resolve([results[0]
                             , el
                             , q[0]
                             , $(el)
                             .siblings("li").length + 1])
            };
        });
    })
    .fail(function(jqxhr, textStatus, errorThrown) {
      dfd.reject([textStatus, errorThrown]);
    });
    return dfd.promise()
};

    $("ul")
    .find("li")
    .attr("title", "click")
    .css({
        "width": "100%",
        "margin": "4px",
        "list-style": "none"
    })
    .on("click", function (e) {
    request($(e.target).not("li") 
            ? $(e.target).closest("li") 
            : $(e.target))
        .then(function (data) {
        var results = data[0];
        $(data[1])
            .addClass("clicked")
            .html(function (i, o) {
            return o.indexOf(results["description"]) != -1 
            ? o 
            : o + results["description"]
            })
            .find("img")
            .attr("src", results["image"]);
        if ($(".clicked").size() === data[3]) {
            console.log($(".clicked").size() 
                        + " items loaded from collection, complete.");
            $(".clicked").off("click");
        };
        }, function (error) {
             request._notify.apply($, error);
        }, function (progress) {
             request._notify.apply($, progress);  
        });
});

jsfiddle http://jsfiddle.net/guest271314/txkpagyz/

Answer 3

这是我用来工作的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]);
        }   

    }

});

function getLengthObject(o){
    var key, count = 0;

    for(key in o) {
        if(o.hasOwnProperty(key)) {
        count++;
        }
    }

    return count;

}

});

使用jquery从json获取特定数据并在html中显示

3 个答案: