创建高阶函数来比较值

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类，它们是"翻转"，"永久"的，以及用于卡片起点和图标的类。

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');
    }
});