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而不是background-color?它是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');   
    }
});

Answer 2

我假设在第二个选择之后…两个值都被重置。这就是我要做的:

var pick1 = null;
var pick2 = null;
$('.card').click(function() {
    // set first card
    if (pick1 === null) {
        pick1 = $(this).css('background-color');
    }
    // set second card
    else if (pick2 === null) {
        pick2 = $(this).css('background-color');
        // compare colors
        if (pick1 === pick2) {
            alert('MATCH!');
        }
        else alert('NO MATCH!');
        // reset pick variables
        pick1 = null;
        pick2 = null;
    }
});

这可以更短，但我已经详细说明，使其更明显发生了什么

Answer 3

首先

如何使它在提示前让我点击?

要做到这一点，您需要在click事件....中调用alert既然你在document.ready上调用alert…首先调用Alert(一旦文档准备好)..

其次，对于相同的选择器.card，您调用了两次单击函数，这一点都不好....

得到你想要的东西的方法是…创建一个数组，点击将背景颜色或各自的div推到该数组中，并比较该数组中的值。

var tempArray=[]; //create an array
$('.card').click(function(){
    alert($(this).css('background-color')) //this will give you alert after click with the bgcolor
    tempArray.push($(this).css('background-color'));
    console.log(tempArray) //check you developers tool > console to check the array.
});

现在你在tempArray里面有了所有点击过的bgcolor，你现在可以做比较了。因为我不知道你想做什么(比较)，所以我想这将让你开始。

与上面类似，但使用比较逻辑…使用了inArray和clickcount…检查一下

 var tempArray=[]; //create an array
 var clickedCount= 1;
$('.card').click(function(){
  var bgColor=$(this).css('background-color') ;
  if(tempArray.length > 0){
     if(($.inArray(bgColor, tempArray)) != -1){
       alert("correct");
     }else{
       alert("incorrect");
     }
  }
    if(clickedCount % 2 != 0){  
       tempArray.push($(this).css('background-color'));
    }else{
       tempArray=[];
    }
     clickedCount++;
});

这里小提琴

更新的工作小提琴