使用jQuery在JSON文件中显示图像

2024-04-29 • 问答

我有一个JSON文件，其中包含8张图像，每个图像我都希望与一个类一起显示。我试图将第一张图片加载到第一类上，但是它不起作用。

我尝试过的jQuery：

  jQuery(function($) {
   $.getJSON('example.json',function (response) {
    $('.tile-image1').each(function(i) {
     $(this).append('<div><img src= "' + response.Tiles[i].img[i].img1 + '"> 
     </div>');
     });
    });
   });

HTML：

  <div class="tile-image1"></div>
  <div class="tile-image2"></div>
  <div class="tile-image3"></div>
  <div class="tile-image4"></div>

JSON：

 {
"Tiles" : [
  {
    "title" : "","year" : "-","category" : "","img": {
    "img1" : "example.jpg","img2" : "example.jpg","img3" : "example.jpg","img4" : "example.jpg"
    }
  },{
    "title" : "","year" : " -","img" : {
    "img1" : "example.jpg","img4" : "example.jpg"
    }
   }
  ]
 }

因此，我想要实现的是与类tile-image1一起显示的JSON文件中的所有“ img1”，对于类tile-image2的所有“ img2”，等等。这和任何帮助将不胜感激。

要实现此目的，您需要遍历对象本身中的数组而不是DOM中的元素。这样，您可以使用相关的div元素填充目标img容器。

您将需要两个循环，一个循环通过Tiles，另一个循环通过每个图块中的img对象的属性。请注意，我修改了div上的类以使其干燥。

$.getJSON('example.json',function (response) {
  response.Tiles.forEach(function(tile) {
    Object.keys(tile.img).forEach(function(imgKey) {
      $('.' + imgKey).append('<div><img src="' + tile.img[imgKey] + '">  </div>');
    });
  });
});

var response = {
  "Tiles": [{
    "title": "","year": "-","category": "","img": {
      "img1": "example_1_1.jpg","img2": "example_1_2.jpg","img3": "example_1_3.jpg","img4": "example_1_4.jpg"
    }
  },{
    "title": "","year": " -","img": {
      "img1": "example_2_1.jpg","img2": "example_2_2.jpg","img3": "example_2_3.jpg","img4": "example_2_4.jpg"
    }
  }]
}

jQuery(function($) {
  // inside AJAX callback...
  response.Tiles.forEach(function(tile) {
    Object.keys(tile.img).forEach(function(imgKey) {
      $('.' + imgKey).append('<div><img src="' + tile.img[imgKey] + '">  </div>');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tile-image img1"></div>
<div class="tile-image img2"></div>
<div class="tile-image img3"></div>
<div class="tile-image img4"></div>

我创建了一个代码段，可能会启发您完成其余工作：

var jsonData= {
"Tiles" : [
  {
    "title" : "","year" : "-","category" : "","img": {
    "img1" : "example.jpg","img2" : "example.jpg","img3" : "example.jpg","img4" : "example.jpg"
    }
  },{
    "title" : "","year" : " -","img" : {
    "img1" : "example.jpg","img4" : "example.jpg"
    }
   }
  ]
 };
 
 
   //jQuery(function($) {
 jsonData.Tiles.map(list=>{
     //console.log(list)
     Object.values(list.img).map((imgLink,i)=>{
     let index = i+1;
     $('.tile-image'+i).append('<div><img src="'+imgLink+'"></div>');

  })

 })

div{
  width:25%;
  display:flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tile-image1"></div>
  <div class="tile-image2"></div>
  <div class="tile-image3"></div>
  <div class="tile-image4"></div>

使用jQuery在JSON文件中显示图像

jayoyhjay 回答：使用jQuery在JSON文件中显示图像

大家都在问