Блог

Я изучаю некоторые вещи с помощью CSS grid и выборки. И у меня действительно есть проблема. Я хочу получить данные с сервера и поместить их в свой макет CSS grid. Моя сетка выглядит как этот пример сетки Code pen, и это выглядит хорошо, но она жестко закодирована в html. Когда я помещаю это как JS, все идет наперекосяк. Я пытаюсь сделать что-то вроде этого:

 class UI{
 constructor(){
  const thisUI = this;
  thisUI.photo = document.querySelector('#photo');
 }
showPhotos(data) {
    const thisUI = this;
    let output = '';

    for (let photo of data) {
      output  = ' here I am puttiong my hmlt code where I am using 
            data-id="${photo.id}"
            href="${photo.url}" 
            in my <a> tag
            and
            <img
            data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 1"
              class="gallery__img"
            />
            ';
    }
    thisUI.photo.innerHTML = output;
  }
}
 

Я использую такой код для всех моих элементов сетки от 1 до 8, но это означает, что одно изображение обрабатывается 8 раз. Итак, у меня есть 8×8 <div> , заполненные 8 одинаковыми фотографиями

 <div class="gallery_container">
        <figure class="gallery_item gallery_item--${photo.id}">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
          data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
            data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 1"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--2">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
             data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 2"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--3">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
             data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 3"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--4">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
            data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
               data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 4"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--5">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
             data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 5"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--6">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
            data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 6"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--7">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
           data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
              data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 7"
              class="gallery__img"
            />
          </a>
        </figure>
        <figure class="gallery_item gallery_item--8">
          <a href="#">
            <i class="far fa-trash-alt gallery_item--icon"></i>
          </a>
          <a
            data-id="${photo.id}"
            href="${photo.url}"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img
               data-id="${photo.id}"
              src="${photo.url}"
              alt="Gallery image 8"
              class="gallery__img"
            />
          </a>
        </figure>
      </div>
      `;
 

HTML для функции JS showPhotos