JQueryコンテナのコンテナ構造の問題

Question

私は学校のためのメモリゲームを終えています。私はカードをCSSアニメーションで元に戻したいと思っています。しかし、JavaScriptとJQueryの新機能で、適切なコンテナ構造を実現する上でいくつかの問題を引き起こしています。クリックするとカードを反転させる必要があります。

次のように現在のゲームの駒はボードの中に生成します。

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> 

しかし、アニメーションが適切に前面と背面のdivの両方を機能させるためには内に存在する必要がありますが

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

divを追加するにはどうすればいいですか（.flip）bu .gameboardコンテナ内で生成されている他のdivに追加するのではなく、前と後のdivが含まれています。

ありがとうございました。

Answer 1

jQueryメソッドではなくテンプレートリテラルを使用してDOMを作成する方がずっと簡単です。そうすれば、慣れてきたようにHTMLだけを記述することができます。

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>

あなたがブレースで、実行時にコードを実行することにより、文字列の補間を行うことができますされ、${cards[i]}に気付くでしょう。

---

バニラJSバージョンです。

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>

またcardの代わりcards[i]を使用し、コールバックの矢印機能。

---

これは1つの追加を実行します。

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>