Question

所以我正在尝试制作记忆游戏，项目进展缓慢但稳定。

我有一个4x4版本的div，带有“card”类和对独特的颜色。我正试图在这些方面做点什么：

单击一个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');   
    }
});

Answer 2

首先

如何让它在发出警报之前让我点击？

要使其正常工作，您需要在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，你现在可以做你的比较了。因为我不知道你想做什么（比较）所以我想这会让你开始。

<强>更新

与上面类似，但是使用比较逻辑...在阵列和clickedCount中使用...检查出来

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

fiddle here

updated working fiddle

Answer 3

我假设在第二次选择之后...两个值都被重置。所以这就是我要做的事情：

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

});

这可能会更短，但我已经详细说明了发生的事情会更加明显。

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

3 个答案: