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] 및 콜백 함수 화살표 이용한다.

---

그리고 이것은 하나의 추가를 수행합니다.

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>