如何使用 javascript 連續制作 3 列和 2 列（引導程序）？

Question

我是 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) + " €";
        indexImg.setAttribute("src", data[i].imageUrl);
    }
})

);

這是我的檢查員的結果：

我的代碼的結果

謝謝你的幫助

Answer 1

如果我理解正確，您只希望從 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) + " €";
    indexImg.setAttribute("src", data[i].imageUrl);
}

如果您的 API 返回超過 5 個元素，則此代碼將中斷。 你可以試試cols[i % 5].appendChild(indexCard); 或考慮其他布局策略。