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），但是它包含前面和后面的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>

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

1 个答案: