0

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

我有一个 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 格式的，如果它甚至可以按原样进行比较？

4

3 回答 3

0

我只需单击一下事件即可完成。只需比较两个 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');   
    }
});
于 2013-03-23T18:14:22.043 回答
0

首先

我如何让它在提醒之前让我点击？

为此，您需要在单击事件中调用警报..因为您在 document.ready 上调用警报..警报首先被调用（一旦文档准备好）..

其次，你为同一个选择器调用了两次点击函数，.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 和 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++;
});

在这里摆弄

更新的工作小提琴

于 2013-03-23T18:15:20.417 回答
0

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

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

});

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

于 2013-03-23T18:34:01.187 回答