用 javascript 和 html 制作卡片答案

【问题标题】：Making cards with javascript and html用 javascript 和 html 制作卡片
【发布时间】：2018-10-10 12:06:50
【问题描述】：

我应该制作 9 张卡片。使用 for 循环创建 t。当它说它是数字 1 时，它应该增加它在循环中的数字。将循环的编号添加到数据属性。为卡片创建一个 CSS 类，使其具有上图的样式。每张奇数卡的背景颜色应为#52ce90。文本的颜色应变为白色。

我试过了，但我不知道怎么做。

这是我的代码：

var div = document.createElement("div");
var newCard = "test";
var i;
for (let i = 1; i <= 9; i++) {
  newCard += "Box number" + i "<br>";
}

<div class="container" id="Container">
  <div class="card" id="card">
    <div class="card--header">
      <h1 class="card--number--text">
        Card number
      </h1>

      </div>
      <div class="card--by">
        By 
      </div>
      <div class="card--time">
       43 minutes ago
      </div>
      <button class="card--button"> View on site</button>

以及如何在 css 中设置样式，我应该使用什么类或 id，以及如何让这些框起来？

【问题讨论】：

点击按钮时是否需要添加卡片之类的东西？
不，按钮将是“假的”
那么，你想用JS生成9张带有样式的卡片对吧？
是的，我想是的。但我认为我应该用 CSS 设置它们的样式，所以我只需要正确设置，这样我就可以开始设置样式了。这是我正在努力解决的 Html 和 JS 设置
Duplicate of stackoverflow.com/questions/52738238/style-for-loop-with-css // 即使您现在将数字从 8 增加到 9，这也不会成为一个根本不同的问题 - 所以您应该坚持现有的问题。

标签： javascript html css

【解决方案1】：

这里有将 card-odd 类附加到奇数值的代码。知道你可以随心所欲地设计它

let container = document.querySelector('.container');

for (let i = 1; i <= 9; i++) {
    let myDiv = document.createElement("div");
  if (i%2 === 0) {
    myDiv.innerHTML = "<div class=\"card\">"+ i +"</div>" 
  }
  else {
    myDiv.innerHTML = "<div class=\"card card-odd\">"+ i +"</div>" 
  }
    container.appendChild(myDiv);
}

这里有一个小提琴： https://jsfiddle.net/06Lnghvw/

您还可以使用纯 CSS 简单地设置奇数和偶数卡片的样式。请阅读：https://www.w3schools.com/cssref/sel_nth-child.asp

【讨论】：

【解决方案2】：

我已经创建了一个符合您要求的 sn-p。看这里：

var container = document.getElementById("container");
for( var i=1;i <=9; i++)
{
	var el = document.createElement("div");
  el.className ="card";
  el.id = "card" + i;
  el.innerHTML = "ok";
  container.append(el);
}

.card:nth-child(odd) {
  background: #52ce90;
  color: #fff;
}

<div id="container">

</div>

【讨论】：