JQuery 的容器结构问题 - 包含容器答案

【问题标题】：Container structure issue with JQuery - Containing containersJQuery 的容器结构问题 - 包含容器
【发布时间】：2017-11-19 15:27:35
【问题描述】：

我正在为学校完成一个记忆游戏，我真的很想用 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。

谢谢。

【问题讨论】：

标签： javascript jquery html css structure

【解决方案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",
]);

&lt;div class=gameBoard&gt;&lt;/div&gt;

它还使用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",
]);

&lt;div class=gameBoard&gt;&lt;/div&gt;

【讨论】：