记忆游戏 - 如何在警报弹出前显示两张卡图像

我已经使用JavaScript编写了一个记忆游戏代码。我的问题是，我无法弄清楚为什么选择的两张牌在警报之前没有显示（说他们是相同的/不是他们不匹配的）。我很困惑，因为警报是在两个卡被点击后运行的isMatch函数中（isTwoCards函数）。记忆游戏 - 如何在警报弹出前显示两张卡图像

var isTwoCards = function(){ 
    if (this.getAttribute('data-card') === 'king') { 
     this.innerHTML = '<img src="King.png" class = "myImgClass" alt="King"/>'; 
    } else { 
     this.innerHTML = '<img src="Queen.png" class = "myImgClass" alt="Queen" />'; 
    } 
    cardsInPlay.push(this.getAttribute('data-card')); 
    if (cardsInPlay.length === 2) { 
     isMatch(cardsInPlay); 
    } 
}; 

var isMatch = function() { 
    if (cardsInPlay[0] !== cardsInPlay[1]) { 
     alert('Sorry, try again.'); 
     cardElement.className = ""; 
    } else { 
     alert('You found a match!') 
    }; 
    cardsInPlay = []; 
}

这里是整个代码：http://codepen.io/Lupeman/pen/GNgXrm

任何帮助，因为它的驾驶我坚果不胜感激！我想在没有JQuery的情况下这样做。

来源

2016-11-07 Lupeman1

的可能的复制[为什么我的javascript代码不能从顶部处理到底编码？]（http://stackoverflow.com/questions/40337451/why-my-javascript-code-not-process-from-从上到下编码） –

您希望延迟isMatch检查，直到UI完成更新并且用户已经完成鼠标移动。

if (cardsInPlay.length === 2) { 
    setTimeout(function() { 
     isMatch(cardsInPlay); 
    }, 1000); 
}

来源

2016-11-07 06:36:35 elfan

Elfan！非常感谢。它一直困扰着我很久，我试图找到的所有解决方案都非常复杂，几乎总是涉及到JQuery。感谢您的简单回答 - 非常感谢！ – Lupeman1

记忆游戏 - 如何在警报弹出前显示两张卡图像

回答

相关问题