javascript - 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]))));
    }); 
};

或者:

<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) 但它包含正面和背面 div，而不仅仅是附加到在 .gameboard 容器中生成的其他 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>