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

Posted 2023-02-25

【中文标题】JQuery 的容器结构问题 - 包含容器

【英文标题】：Container structure issue with JQuery - Containing containers

【发布时间】：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。

谢谢。

【参考方案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>