如何将div类应用于循环的span id？

Question

我对编码很陌生，我正在努力学习基础知识。我想通过制作闪存卡来练习我学到的东西(没有什么比保存、导入或导出它更复杂的了)。到目前为止，我创建了一个用户可以编辑的表。我知道如何从表中收集数据，但我不知道如何使每次用户向表中添加卡时都会出现CSS闪存卡。我知道代码不会工作，因为我把CSS放在JavaScript中，因为这段代码只是为了展示我想要做的事情。此外，如果我采取了完全错误的做法，请告诉我。谢谢!请原谅错误的变量命名，我只是在测试一些东西。

<script>

 function getFlashcardValue() {
 
 for (var repeat = 0; repeat < 200; repeat++) {
 var Table = document.getElementById('flashcardsTable');
 
 var column1 = 0;
 var column2 = 1;
 
 var numberOfFlashcards = 2;
 
 for (var row = 0; row < numberOfFlashcards; row++) {
 
 var Cells = Table.rows.item(1).cells;
 
 var Question1 = Cells.item(column1).innerHTML;
 
 
 var Cells1 = Table.rows.item(1).cells;
 
 var Answer1 = Cells.item(column2).innerHTML;
 
 
 document.getElementById("myFlashcardQuestion" + row).innerHTML =  Question1;
 
 document.getElementById("myFlashcardAnswer" + row).innerHTML =  Answer1;
 
 <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <span id="myFlashcardQuestion1"></span>
    </div>
    <div class="flip-card-back">
    <span id="myFlashcardAnswer1"></span>
    </div>
  </div>
</div>
}
 
 }
 
}
</script>

<p style = "font-size: 25px">Hover over the flashcard to flip it!</p>


<style>
.flip-card {
  background-color: transparent;
  width: 350px;
  height: 175px;
  margin: auto;
  padding: 5px 5px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  background-color: lightblue;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: lightblue;
  width: 350px;
  height: 175px;
  color: black;
  font-size: 35px;
  text-alignment: center;
}

.flip-card-back {
  background-color: red;
  color: white;
  font-size: 35px;
  text-alignment: center;
  transform: rotateY(180deg);
}
</style>

Answer 1

因此，首先您可以在stackoverflow编辑器中创建一个代码片段(见下文)，或者使用jsfiddle并发布一个共享链接。这取决于用户在输入数据后必须执行的操作。例如，如果是一个按钮单击，那么就可以调用一个函数来显示用户在闪存卡中的输入。现在，如果您想要对每一个Q&A都这样做，您必须在for循环中创建元素并在那里编辑它们。这里有个小例子。

​

var allCards = document.getElementById("allCards");
for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data
  var question = document.createElement("div");
  question.textContent = "Question " + i;
  question.classList.add("flip-card");
  allCards.appendChild(question);
}

.flip-card {
  background-color: lightblue;
  width: 350px;
  height: 175px;
  margin: 10px auto;
  padding: 5px 5px;
  font-size: 35px;
  text-align: center;
}

<div id="allCards"></div>

​

编辑:正如承诺的那样，，这里是一个如何设置倒装卡的例子。

https://jsfiddle.net/ybu59hfp/1/

你的顾虑现在应该解决了。如果你还有其他的问题，可以在聊天的时候给我写信，或者在网上读一些关于JavaScript的东西。