javascript - 填充每个 div 而不仅仅是第一个

问题描述

我一直在尝试使用其各自的子项创建一个 div，但循环创建了与 API 相关的所有 DIV，但在第一个 div 中填充了所有 IMG。我想要实现的是通过循环创建它：

<div id="box" class="box">

    <span class="title"></span>

    <a href="#link from image">
        <img src="#url goes here" />
    </a>

</div>

所以稍后我可以在 CSS 中单独创建卡片，将每个缩略图组织为链接以及顶部的标题并包裹在图像中。

到目前为止，我对此的 JS 如下：

const form = document.querySelector('#buscarPosts')

/* document.addEventListener('load', async function(e) {
    e.preventDefault();
    const loadPage = await axios.get('https://api.devall.com.br/api/v1/post')

    const loadFirst = (firsts) => {
        for (let firstLoad of firsts) {
            const div = document.createElement('DIV');
        div.id = 'box';
        div.classList.add('box');

        const img = document.createElement('IMG');;        
        img.src = result.thumbnail;
        img.classList.add('thumbnailClass')

        const title = document.createElement('SPAN');
        title.classList.add('title')
        title.innerHTML = result.titulo;


        document.querySelector("#container").append(div)
        document.querySelector("#box").append(title);
        document.querySelector("#box").append(img);
        }
    }

    loadFirst(loadPage.data)
}) */

form.addEventListener('submit', async function(e){
    e.preventDefault();
    const searchValue = form.elements.search.value;
    const res = await axios.get(`https://api.devall.com.br/api/v1/post?search=${searchValue}`)

    addThumbnails(res.data);
})

const addThumbnails = (previews) => {
    for (let result of previews) {

        const box = document.createElement('DIV');
        box.id = 'box';
        box.classList.add('box');

        const img = document.createElement('IMG');      
        img.src = result.thumbnail;
        img.classList.add('thumbnailClass')

        const title = document.createElement('SPAN');
        title.classList.add('title')
        title.innerHTML = result.titulo;


        document.querySelector("#container").append(box)
        document.querySelector("#box").append(title);
        document.querySelector("#box").append(img);
    } 
    
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: url("../images/pexels-scott-webb-3255761.jpg");
  filter: saturate(150%);
  background-size: cover;
}

fieldset {
  margin: 0;
  padding: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  -webkit-padding-after: 0;
  border: 0;
}

.s006 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items:flex-start;
  font-family: 'Poppins', sans-serif;
  padding-top: 50px;
  margin-bottom: 50px;
}

.s006 form {
  width: 100%;
  max-width: 790px;
}

.s006 form legend {
  font-size: 36px;
  color: #fff;
  font-weight: 800;
  text-align: center;
  margin-bottom: 30px;
}


.s006 form .inner-form .input-field {
  height: 50px;
  width: 100%;
  position: relative;
}

.s006 form .inner-form .input-field input {
  height: 100%;
  width: 100%;
  background: transparent;
  border: 0;
  background: #fff;
  display: block;
  width: 100%;
  padding: 10px 32px 10px 30px;
  font-size: 18px;
  color: #666;
  border-radius: 34px;
}


.s006 form .inner-form .input-field input:hover, .s006 form .inner-form .input-field input:focus {
  box-shadow: none;
  outline: 0;
}

.s006 form .inner-form .input-field .btn-search {
  width: 70px;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: absolute;
  right: 0;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.s006 form .inner-form .input-field .btn-search svg {
  fill: #ccc;
  width: 30px;
  height: 30px;
  transition: all .2s ease-out, color .2s ease-out;
}

.s006 form .inner-form .input-field .btn-search:hover, .s006 form .inner-form .input-field .btn-search:focus {
  outline: 0;
  box-shadow: none;
}

.s006 form .inner-form .input-field .btn-search:hover svg, .s006 form .inner-form .input-field .btn-search:focus svg {
  fill: #666;
}

.container {
  max-width: 1520px;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: flex-start;
}


.thumbnailClass {
  height: 200px;
  padding: 18px;
  opacity: 0.6;
  text-align: center;
}

.thumbnailClass:before {
  content:'';
  display: table;
  float:left;
  padding-top:100%;
}

.thumbnailClass:hover {
  background-color: rgba(255, 255, 255, 0.0);
  opacity: 1;
  transition: background-color 0.5s;
  transition: opacity 0.5s;
}

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,800" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>

    <div class="s006">
      <form id="buscarPosts">
        <fieldset>
          <legend style="color: black;">/dev/All</legend>
          <div class="inner-form">
            <div class="input-field">
              <button class="btn-search" type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                </svg>
              </button>
              <input id="search" type="text" placeholder="Search for a post"/>
            </div>
          </div>
        </fieldset>
      </form>

    </div>
    <post id="container" class="container">
        
    </post>
  </body>
  <script src="js/main.js"></script>
</html>

问题是，只有创建的第一个 DIV 填充了里面的所有图像，而我想要的是，对于每个 div 一个单独的 img，就像我发布的第一个示例一样。请帮忙！

标签： javascriptcssarrays

javascript - 填充每个 div 而不仅仅是第一个

问题描述

解决方案

推荐阅读