Question

所以我的任务是创建一个记忆卡游戏。我们需要使用jQuery或JavaScript来翻转卡片，比较它们，然后取消它们。

到目前为止，我最多可以使用两张卡进行翻转，但是我无法让它们取消翻转或测试图标匹配。

我认为我需要使用更高阶的功能，但我不知道如何编写它（特别是因为我真的很想比较值来测试卡是否匹配）

到目前为止，这是我的jQuery内容：

var track = 0;

$('li').click (function(){
track++
if (track === 1){
  $(this).addClass('flipped')
  $(this).children().css('opacity', '1');
  console.log(track);
  }

  else if (track === 2){
  $(this).addClass('flipped')
  $(this).children().css('opacity', '1');
  console.log(track)
  }
});


$('li').click (function(){

    if ($(this).val() == ($(cardFlip).val ()){
    $(this).removeClass('flipped')
    $(this).addClass('permanent');
}
  else {
    $(this).removeClass('flipped');
    $(this).childre().css('opacity', '0');
  }
});

我有相应的CSS课程，这些课程被翻转为永久性的＆＃39;，以及卡片的起点和图标。

JS小提琴 https://jsfiddle.net/9b2038zx/

Answer 1

您只需要绑定一个点击事件。

var track = 0;
var flippedExists = false;
var flipped;
$('li').click (function(){
    track++
    if (flippedExists){
         if ($(this).val() == flipped.val()){   //success
            $(this).removeClass('flipped')
            $(this).addClass('permanent');
            flipped.removeClass('flipped')
            flipped.addClass('permanent');
        }else {                                 //fail
            flipped.removeClass('flipped');
            flipped.children().css('opacity', '0');
        }
        flippedExists = false;
    }else{                                      //first flip
        flippedExists = true;
        flipped = $(this);
        $(this).addClass('flipped')
        $(this).children().css('opacity', '1');
    }
});

创建更高阶函数以比较值

1 个答案: