javascript - jQuery 从两个点击的 div 中获取背景颜色，然后比较它们

Question

所以我正在尝试制作一款内存游戏，该元素进展缓慢但稳定。

我有一个 4x4 的 div 布局，带有类“卡片”和一对唯一的颜色。我正在尝试按照这些思路做一些事情:

点击一个div，获取颜色，保存到pick1。单击另一个 div，获取颜色，保存到 pick2。比较两者。

现在我什至没有进行比较，只是提醒变量 pick1 和 2 以查看我从点击中得到了什么。

我已经尝试了一些不同的方法来从 div 中检索背景颜色，现在我正在使用以下方法:

$('.card').click(function(){
    pick1 = $(this).css('background-color');    
});

$('.card').click(function(){
    pick2 = $(this).css('background-color');
});


alert(pick1 + " and " + pick2);

但它只是立即发出警报，然后显示 div。如果我让它运行这部分两次，它只会发出两次警报，然后显示 div。

如何让它在发出警报之前让我点击？从昨天开始，我是 jQuery 的新手，两年来根本没有使用过 javascript :p

这是一个例子:http://jsfiddle.net/94jerdaw/WJQkA/

此外，是否有更好的方法来比较 div 而不是背景颜色？它是 rgb 格式，是否可以直接比较？

Answer 1

我会用一次点击事件来完成。只需比较两个 rgb 字符串就足够了。

var pick1 = false;
var pick2 = false;

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

    if(pick1) {
        pick2 = $(this).css('background-color');
        if(pick1 == pick2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');   
    }
});