Container-Struktur-Problem mit JQuery - containing contains

Question

Ich beende ein Memory-Spiel für die Schule und ich würde wirklich gerne die Karten mit einer CSS-Animation drehen, die auf ihre eigenen ist ziemlich geradlinig. Allerdings bin ich ziemlich neu in JavaScript und JQuery, was zu einigen Problemen beim Erreichen der richtigen Containerstruktur führt, die ich brauche, um die Karten umzudrehen, wenn sie angeklickt werden.

Derzeit die Spielsteine ​​erzeugen innerhalb der Platte wie folgt:

const generate=(cards)=>{ 
    cards.forEach(function(card, i) { 
     $(".gameBoard") 
     .append($("<div>").addClass("front")// 
     .append($("<div>").addClass("back").append($(" 
     <img>").attr("src", cards[i])))); 
    }); 
}; 

OR:

<div class="gameBoard> 
    <div class="front"></div> 
    <div class="back"><img src="cards"></div> 
</div> 

Aber um für die Animation richtig funktionieren sowohl die Vorder-und Rückseite divs in existieren müssen derselbe container wie dieser:

<div class="gameBoard> 
    <div class="flip"> 
      <div class="front></div> 
      <div class="back"><img src="cards></div> 
    </div> 
</div> 

Wie kann ich die div ich brauche (.flip) bu hinzufügen Es muss die Divisionen für vorne und hinten enthalten und nicht nur an die anderen divs angehängt werden, die innerhalb des .gameboard Containers erzeugt werden.

Danke.

Answer 1

Es ist viel einfacher, Ihr DOM mit Vorlagenliteralen statt mit jQuery-Methoden zu erstellen. Auf diese Weise beschreiben Sie einfach das HTML, wie Sie es gewohnt sind.

const generate=(cards)=>{ 
 
    cards.forEach(function(card, i) { 
 
     $(".gameBoard").append(` 
 
      <div class=flip> 
 
      <div class=front></div> 
 
      <div class=back><img src="${cards[i]}"</div> 
 
      </div> 
 
     `); 
 
    }); 
 
}; 
 

 
generate([ 
 
    "https://dummyimage.com/180x120/f00/fff.png&text=one", 
 
    "https://dummyimage.com/180x120/0f0/fff.png&text=two", 
 
    "https://dummyimage.com/180x120/00f/fff.png&text=three", 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class=gameBoard></div>

Sie werden die ${cards[i]} bemerken, die Sie in den Klammern zur Laufzeit durch die Ausführung der Code-String-Interpolation durchführen können.

---

Hier ist eine Vanille JS-Version.

const generate=(cards)=>{ 
 
    var gb = document.querySelector(".gameBoard"); 
 
    cards.forEach(card => 
 
     gb.insertAdjacentHTML("beforeend", ` 
 
      <div class=flip> 
 
      <div class=front></div> 
 
      <div class=back><img src="${card}"</div> 
 
      </div> 
 
     `) 
 
    ); 
 
}; 
 

 
generate([ 
 
    "https://dummyimage.com/180x120/f00/fff.png&text=one", 
 
    "https://dummyimage.com/180x120/0f0/fff.png&text=two", 
 
    "https://dummyimage.com/180x120/00f/fff.png&text=three", 
 
]);

<div class=gameBoard></div>

Es nutzt auch card statt cards[i], und ein Pfeil Funktion für den Rückruf.

---

Und dieser führt einen einzelnen Anhang.

const generate=(cards)=>{ 
 
    document.querySelector(".gameBoard") 
 
     .insertAdjacentHTML("beforeend", cards.map(card => 
 
     ` <div class=flip> 
 
      <div class=front></div> 
 
      <div class=back><img src="${card}"</div> 
 
      </div>`).join("")); 
 
}; 
 

 
generate([ 
 
    "https://dummyimage.com/180x120/f00/fff.png&text=one", 
 
    "https://dummyimage.com/180x120/0f0/fff.png&text=two", 
 
    "https://dummyimage.com/180x120/00f/fff.png&text=three", 
 
]);

<div class=gameBoard></div>