时间戳

首页 > 解决方案 > 从 Javascript 数组和不同行和列中的 Bootstrap 生成动态卡片 HTML 卡片

javascript - 从 Javascript 数组和不同行和列中的 Bootstrap 生成动态卡片 HTML 卡片

问题描述

我想创建我的团队部分，其中一行多于一排，一排有 5 张卡片。我想创建所有团队成员的数组并以上述格式对齐。但是我的问题是当一行被 5 张卡片填充时，我无法使卡片在不同的行中对齐。

我通过手动为 3 行创建 3 个不同的数组来做到这一点。但我想使用单数组和单循环来做到这一点。

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  }
];


const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
    <div class="col-md-2 shadow p-3 mb-5 bg-white rounded ">
        <img src="${result.img}" height="150" width="150" alt="name">
        <h4>${result.name}</h4>
        <h6>${result.position}</h6>
        <div class="border-bottom"></div>
        <a href="${
          result.facebook
        }" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="${
          result.email
        }" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a>
        </div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

这是我的 HTML 代码：

<div class="row justify-content-around wow zoomIn" id="teamRowOne">
      </div>

我希望每行只对齐五张卡片。

标签： javascripthtmlcssarraysbootstrap-4

解决方案

有上千种方法可以做到这一点，我只想举一个使用模运算符的例子。您可以像这样在一个循环中执行此操作：

// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;

（它是可调整的伪代码，让您有一个想法）

推荐阅读