Question

我想显示JSON文件中的元素。

这是JSON文件

"2015": {
"img": "<img src = \"../images/images/images_of_members/image1.jpg\">",
"img2": "<img src = \"../images/images/images_of_members/image2.jpg\">"},

"2016": {
"img": "<img src = \"../images/images/images_of_members/image1.jpg\">",
"img2": "<img src = \"../images/images/images_of_members/image2.jpg\">"  }

这是JavaScript文件

$.ajax("gallery.json", {
    dataType: 'json',
    success: function (response) {
        $.each(response, function () {
            $.each(this, function (i, el) {
                $(".photo_target").css('display', 'block');
                $(".photo_target").append(el);
            });
        });
     }
});

这是HTML文件

<div class="years">
    <p data-year="2015">Pictures 1</p>
    <p data-year="2016">Pictures 2</p>
</div>
<div class="photo_target"></div>

如果我点击带有属性data-year 2015的段落并显示来自对象2016的图片，如果我点击带有属性data-year 2016的段落，我想仅显示来自对象2015的图片。现在它是迭代通过所有对象并显示所有图片可以在此JSON文件中找到的内容。

我应该在AJAX调用中更改什么才能让它按照我想要的方式工作？

谢谢

Answer 1

试试这个：

$.ajax("gallery.json", {
  dataType: 'json',
  success: function (response) {
    $(".photo_target").css('display', 'block');
    for(var year in response){
      for(var key2 in response[year]){
        var $img = $(response[year][key2]);
        $img.hide();
        $img.data("year", year);
        $(".photo_target").append($img);
      }
    }
  }
});

$(".years p").click(function(){
  var year = $(this).data("year");
  $(".photo_target").find("img").hide();
  $(".photo_target").find("img[data-year='" + year + "']").show();
  return false;
});

Answer 2

很长一段时间我做了一些JQuery，但你可以做类似的事情：

首先改变你的json *：

{2015 : ['/images/img1', '/images/img2'], 2016 : ['/images/img2']}

然后你做：

function fetchData(year) {
   $.ajax("gallery.json", {
     success : function(response) {
        var images = response[year];
        //images is now an array you could 'for each' over
        images.forEach(function(image) {
          //do your append...
        })

     }
   })
}

（*假设您可以更改json。）

Answer 3

这是一个有效的解决方案：https://jsfiddle.net/hgmx71zt/2/

基本上我每年将所有图像分组到容器div中：

for (var year in jsondata) {
  var $container = $("<div/>");
  $container
    .addClass("year-" + year)
    .appendTo($photo_target)
    .addClass("year-images");

  for (var img in jsondata[year]) {
    var $img = $(jsondata[year][img]);
    $container.append($img);
  }
}

我使用CSS默认隐藏它们。

.year-images {
  display: none;
}

最后，我添加了一个点击事件处理程序，用于切换＆＃34; .visible＆＃34;使给定容器可见的类（再次使用CSS）

$(".years").on("click", "[data-year]", function(e) {
  var year = $(e.currentTarget).data("year"),
    container = $photo_target.find(".year-" + year);
  console.log(year);
  console.dir(container);
  container.toggleClass("visible").siblings().removeClass("visible");
});

可见类的CSS：

.year-images.visible {
  display: block;
}

Answer 4

$（function（）{

$('.years p').on('click', function () {
    $(".photo_target").children().remove();
    var attr = $(this).attr('data-year');
    if (typeof attr !== typeof undefined && attr !== false) {
        var number = $(this).data('year');
        console.log(number);
        $.ajax("gallery.json", {
            dataType: 'json',
            success: function (response) {
                    $.each(response[number], function (i, el) {

                        $(".photo_target").css('display', 'block');

                $(".photo_target").append(el);
                    });

            }
        })

    }
})});

这是我的解决方案。我改变了这一行

success: function (response) {
    $.each(response, function () {
        $.each(this, function (i, el) {
            $(".photo_target").css('display', 'block');
            $(".photo_target").append(el);

到这个

success: function (response) {
                    $.each(response[number], function (i, el) {
                        $(".photo_target").css('display', 'block');
                $(".photo_target").append(el);

现在工作正常。

感谢您的帮助。

如何使用each（）函数迭代JSON文件

4 个答案: