Изображения загружаются дважды с помощью jQuery

Question

Я использовал jQuery для отображения изображений из файла JSON. Однако 2 изображения появляются дважды, когда я хочу отображать только одно из них.

JSON:

{
  "tiles": [
   {
     "city": "example",
     "img" : "example.jpg"
   },
   {
     "city": "example",
     "img" : "example.jpg"
   }
  ]
}

HTML:

<div class="tile-image"></div>
<div class="tile-image"></div>

CSS:

.tile-image img {
  width: 432px;
  height: 192px;
  object-fit: cover;
  border-radius: 4px;
}

jQuery:

jQuery(document).ready(function ($) {
  var jsonURL = "example.json";
  $.getJSON(jsonURL, function (json) {

    var imgList = "";

    $.each(json.tiles, function () {
      imgList += '<div><img src= "' + this.img + '"></div>';
    });

    $('.tile-image').append(imgList);
  });
});

Я пытался удалить два контейнера div из моего HTML, но когда я делаю это, все изображения исчезают. Любые предложения относительно того, почему они появляются дважды, а не один раз, были бы хорошими.

Answer 1

Проблема в том, что вы добавляете imgList ко всем .tile-image элементам.

Чтобы это исправить, вы можете вместо этого перебрать .tile-image и добавить img из данных ответа по соответствующему индексу, например:

// mock AJAX response:
var response = {
  "tiles": [{
    "city": "example",
    "img": "example-1.jpg"
  }, {
    "city": "example",
    "img": "example-2.jpg"
  }]
}

jQuery(function($) {
  // inside the AJAX callback...
  // $.getJSON('example.json', function (response) {
    $('.tile-image').each(function(i) {
      $(this).append('<div><img src= "' + response.tiles[i].img + '"></div>');
    });
  // });
});

.tile-image img {
  width: 432px;
  height: 192px;
  object-fit: cover;
  border-radius: 4px;
}

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