JSON DATA

Question

我想根据ID从JSON文件加载特定数据。我正在根据JSON文件显示下面的缩略图图像列表，然后我想在点击事件上加载大图像。

您可以查看我的代码以供参考。我只是想知道如何根据点击事件列表中的ID在JSON文件中找到大图像。

例如：我想根据'name'值从JSON文件中获取“largeimg”的值。在我的HTML中，“＆lt;'li id =”Red“＆gt;”我希望用户点击这个“＆lt;'li'＆gt;”那么基于id =“Red”应匹配JSON文件中的“name = Red”，并从JSON文件中的“largeimg”获取值“/imgs/redlarge.png”

JSON DATA

<div class="preview">
 <!-- Show data from JSON file based on ID -->
</div>
<div class="list">
 <ul class="colors">
 </ul>
</div>

HTML

$.getJSON('data.json', function (data) {
 $.each(data.colors, function (index, value) {
  $('.colors').append("<li id='item-"+this.name+"'>"+this.thumb+"</li>");
 });
});
$('.list li').click(function(){
    console.log($(this).attr('id'));
});

JQUERY

{{1}}

Answer 1

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中的元素。 [关于方法文件] [1]

对于动态添加的html，您必须使用on方法来附加事件处理程序，如下所示。为json数据定义全局颜色变量以搜索数据。

var colors;

$.getJSON('data.json', function (data) {

    colors = data.colors;

    $.each(data.colors, function (index, value) {
        $('.colors').append("<li id='item-"+this.name+"'>"+this.thumb+"</li>");
    });
});

$('.list li').click(function(){

    var name = $(this).attr('id');

    var found;
    $.each(colors, function(index, item){
        if(item.name == name){
            found = item;
        }
    })
});

if(found){
    console.log(found.largeimg);
}

Answer 2

文件大小看起来不像是在JSON数据文件中提供给您的信息。出于这个原因，我不确定你将如何计划按大小排序。除非，您满意使用“largeimg”作为文件大小。在这种情况下，使用JSON到Java类创建者可以帮助您完成此任务。

这是一个：https://timboudreau.com/blog/json/read

您可能需要搜索新的，但通常它允许您解释您的JSON数据并访问特定的数据部分（即图像大小）

如何基于ID从JSON文件加载特定数据

JSON DATA

HTML

JQUERY

2 个答案: