卡片翻转颠倒，但我只想从三张卡片中翻转两张卡片。我该怎么做？随机播放功能也不起作用

Question

卡片翻转颠倒，但我只想从三张卡片中翻转两张卡片。我该怎么做？随机播放功能也不起作用。

index.html：

<div class="row">  
       <div id="shuffle">       
        
           <!--- Card 1   -->

          <section class="cards">
      <div class="cards__single">
        <div class="cards__front">
        <img src="img/back.jpg" alt="card1"/>
        </div>
                
        <div class="cards__back">
        <img src="cards/theMoon.jpg" alt="card1"/>
        </div>
      </div>

      <!--- Card 2   -->   

      <div class="cards__single">
        <div class="cards__front">
        <img src="img/back.jpg" alt="card1"/>
        </div>
                
        <div class="cards__back">
        <img src="cards/theChariot.jpg" alt="card1"/>
        </div>
      </div>

       <!--- Card 3   -->

              <div class="cards__single">
        <div class="cards__front">
        <img src="img/back.jpg" alt="card1"/>
        </div>

        <div class="cards__back">
        <img src="cards/theSun.jpg" alt="card1"/>
        </div>
      </div>              

          </section>
           <br>
           <button>Shuffle</button>   
       </div>          
</div>               
</div>
          <script src="script/main.js"></script>

main.js：

//Shuffle Cards

function shuffle(elems) {

    allElems = (function(){

    var ret = [], l = elems.length;

    while (l--) { ret[ret.length] = elems[l]; }

    return ret;

    })();

    var shuffled = (function(){

        var l = allElems.length, ret = [];

        while (l--) {

            var random = Math.floor(Math.random() * allElems.length),

                randEl = allElems[random].cloneNode(true);

            allElems.splice(random, 1);

            ret[ret.length] = randEl;

        }

        return ret; 

    })(), l = elems.length;

 

    while (l--) {

        elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);

        elems[l].parentNode.removeChild(elems[l]);
    }
}

var button = document.querySelector('button');

button.addEventListener('click', function() { shuffle( document.querySelectorAll('#shuffle > div') ) }, false);

//Flip only two amongst three cards

const cards = document.querySelectorAll(".cards__single");

function flipCard() {

  this.classList.toggle("flip");
}

cards.forEach((card) => card.addEventListener("click", flipCard));

function showResult(cards) {

  var flipCard = [];

  for (var i = 0; i < 2; i++) {

    flipCard.push(cards[Math.floor(Math.random() * cards.length)]);

  }

  for (var i = 0; i < flipCard.length; i++) {

   flipCard(flipCard[i]);
  }

  return flipCard;
}

console.log(flipCard);

Answer 1

我在你的代码中发现了一些问题。而且您的代码格式不正确。

首先：您有一个名为 FlipCard 的函数，但您也对数组使用相同的名称。你不应该这样做。

其次：在showResult函数中，您正在调用flipCard(flipCard[i])，我不明白为什么。您应该调用 FlipCard 函数并传递卡片元素。

以下是如何修复的示例。

// Shuffle Cards
function shuffle(elems) {
var allElems = (function () {
    var ret = [],
    l = elems.length;
    while (l--) {
    ret[ret.length] = elems[l];
    }
    return ret;
})();

var shuffled = (function () {
    var l = allElems.length,
    ret = [];
    while (l--) {
    var random = Math.floor(Math.random() * allElems.length),
        randEl = allElems[random].cloneNode(true);
    allElems.splice(random, 1);
    ret[ret.length] = randEl;
    }
    return ret;
})();

var l = elems.length;
while (l--) {
    elems[l].parentNode.insertBefore(shuffled[l], elems[l].nextSibling);
    elems[l].parentNode.removeChild(elems[l]);
}
}

var button = document.querySelector("button");

button.addEventListener(
"click",
function () {
    shuffle(document.querySelectorAll("#shuffle > div"));
},
false
);

// Flip only two amongst three cards
const cards = document.querySelectorAll(".cards__single");

function flipCard() {
this.classList.toggle("flip");
}

cards.forEach((card) => card.addEventListener("click", flipCard));

// fixed show result function
function showResult(cards) {
var flippedCards = [];

for (var i = 0; i < 2; i++) {
    flippedCards.push(cards[Math.floor(Math.random() * cards.length)]);
}

flippedCards.forEach((card) => flipCard.call(card));

return flippedCards;
}

console.log(showResult(cards));

检查是否解决了问题。