时间戳

首页 > 解决方案 > 如何使用 javascript 连续制作 3 列和 2 列（引导程序）？

javascript - 如何使用 javascript 连续制作 3 列和 2 列（引导程序）？

问题描述

我是 JavaScript 的初学者。我有问题。我需要创建一些元素，我需要把我的 API 数据就是这些元素。但我想在第一行创建 3 张卡片（引导程序），在第二行创建 2 张卡片。

但我认为我的循环不行。因为我所有的数据都在我的第五张卡上。

那是我的代码 HTML 和 JavaScript：

HTML：

    </section>
<section class="container">
    <div class="row">
        <div id="colCam1" class="col-12 col-lg-4"></div>
        <div id="colCam2" class="col-12 col-lg-4"></div>
        <div id="colCam3" class="col-12 col-lg-4"></div>
    </div>
    <div class="row">
        <div id="colCam4" class="col-12 col-lg-4"></div>
        <div id="colCam5" class="col-12 col-lg-4"></div>
    </div>
</section>

JS：

fetch("http://localhost:3000/api/cameras")
.then((response) =>
response.json().then ((data) => {
    console.log(data);
    for(i=0; i < data.length; i++) {
        let indexCard = document.createElement("div");
        let indexImg = document.createElement("img");
        let indexBodyCard = document.createElement("div");
        let indexProductTitle = document.createElement("h5");
        let indexProductPrice = document.createElement("p");

        colCam1.appendChild(indexCard);
        colCam2.appendChild(indexCard);
        colCam3.appendChild(indexCard);
        colCam4.appendChild(indexCard);
        colCam5.appendChild(indexCard);
        indexCard.classList.add("card");
        indexCard.appendChild(indexImg);
        indexImg.classList.add("card-img-top");
        indexCard.appendChild(indexBodyCard);
        indexBodyCard.classList.add("card-body");
        indexBodyCard.appendChild(indexProductTitle)
        indexProductTitle.classList.add("card-title");
        indexBodyCard.appendChild(indexProductPrice);
        indexProductPrice.classList.add("card-text");

        indexProductTitle.innerHTML = data[i].name;
        indexProductPrice.innerHTML = parseInt(data[i].price) + " €&quot;;
        indexImg.setAttribute("src", data[i].imageUrl);
    }
})

);

这是我检查员的结果：

我的代码的结果

谢谢你的帮助

标签： javascripthtmlbootstrap-4

解决方案

如果我理解正确，您只希望从您的 API 中获得 5 个元素，并且您希望将每个元素放在一个列中。如果是这种情况，您可以将列元素放在一个数组中，并在循环中相应地对它们进行索引，如下所示：

const cols = [colCam1, colCam2, colCam3, colCam4, colCam5]
for(i=0; i < data.length; i++) {
    let indexCard = document.createElement("div");
    let indexImg = document.createElement("img");
    let indexBodyCard = document.createElement("div");
    let indexProductTitle = document.createElement("h5");
    let indexProductPrice = document.createElement("p");

    cols[i].appendChild(indexCard);
    indexCard.classList.add("card");
    indexCard.appendChild(indexImg);
    indexImg.classList.add("card-img-top");
    indexCard.appendChild(indexBodyCard);
    indexBodyCard.classList.add("card-body");
    indexBodyCard.appendChild(indexProductTitle)
    indexProductTitle.classList.add("card-title");
    indexBodyCard.appendChild(indexProductPrice);
    indexProductPrice.classList.add("card-text");

    indexProductTitle.innerHTML = data[i].name;
    indexProductPrice.innerHTML = parseInt(data[i].price) + " €&quot;;
    indexImg.setAttribute("src", data[i].imageUrl);
}

如果您的 API 返回超过 5 个元素，此代码将会中断。您可以尝试类似cols[i % 5].appendChild(indexCard);或考虑其他布局策略。

推荐阅读