javascript - 执行后立即显示子元素

Question

var firstMove = 0;
var pictures = ['boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg','boar.jpg','lion.jpg','bones.jpg','eagle.jpg','wolf.jpg']
pictures.sort()
function replyClick(clicked_id)
{
  //if player already draw one card;
  if (firstMove){
    var image = document.getElementById(clicked_id);
    image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
    var firstPicture = document.getElementById(firstMove);
    if (image.innerHTML == firstPicture.innerHTML){
        firstMove=0;

    }
    else {
      image.innerHTML = "";
      firstPicture.innerHTML = "";
      firstMove=0
    }

  }
  // if player didnt draw any card;
  else {
    var image = document.getElementById(clicked_id);
    image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
    firstMove = clicked_id
  }
}


<div class="card" id="1" onclick="replyClick(this.id)"></div>
<div class="card" id="2" onclick="replyClick(this.id)"></div>

我尝试创建简单的 pexeso 游戏。您在其中寻找两个相同的图像。

我的问题是如何更改此代码以在有人单击后立即显示特定图像。因为我的脚本在内部条件后显示图像，但这对我来说为时已晚。谢谢您的回答

Answer 1

比较数组元素。

pictures[clicked_id-1] == pictures[firstMove-1]

与此相同

image.innerHTML == firstPicture.innerHTML

UPD
对于较小的延迟，请使用 setTimeout

// other code
function replyClick(clicked_id) {
    if (firstMove){
        var imageSrc = pictures[clicked_id-1];
        var prevImageSrc = pictures[firstMove-1];

        var image = document.getElementById(clicked_id);
        image.innerHTML = '<img src='+imageSrc+' />'
        var firstPicture = document.getElementById(firstMove);

        if (imageSrc == prevImageSrc) {
            firstMove=0;
        } else {
            // code will run after 1s delay
            setTimeout(function () {
                image.innerHTML = "";
                firstPicture.innerHTML = "";
                firstMove=0;
            }, 1000); // delay = 1 second
        }

    } else {
        var image = document.getElementById(clicked_id);
        image.innerHTML = '<img src='+pictures[clicked_id-1]+' />'
        firstMove = clicked_id
    }
}