2

我正在制作一个非常简单的小游戏，其想法是通过单击具有特定颜色的 id 为 circle1、circle2 等的四个 div 中的一个来选择您所看到的图形的正确颜色大约一两秒钟：

var odpowiedz_kolor = $('<div class="label id="gra">Jaki kolor miał następujący kształt?</br></br><ul class="inline">'+
                '<div class="odpowiedz_pojemnik" id="' + wylosowane[losowa_z_wylosowanych_figur].figura + '"> </div></br></br>'+
                '<ul class="inline">'+
                '<li><div class="kolo" id="kolo1"> </div></li>'+
                '<li><div class="kolo" id="kolo2"> </div></li>'+
                '<li><div class="kolo" id="kolo3"> </div></li>'+
                '<li><div class="kolo" id="kolo4"> </div></li>'+
            '</ul></div>');

我已经删除了不必要的代码...

$('#kolo1').css('background-color', wylosowane[0].kolor);
$('#kolo2').css('background-color', wylosowane[1].kolor);
$('#kolo3').css('background-color', wylosowane[2].kolor);
$('#kolo4').css('background-color', wylosowane[3].kolor);
$(".kolo").on('click', function(){
var color = $('.kolo').find('#kolo').css('background-color');

我已经设置了如上所示的颜色。现在的问题是如何检索相应的颜色，因为我被卡在点击处理程序上。即使是丑陋但可行的解决方案，我也将不胜感激。

场景是：

  • 您会在几秒钟内看到 4 个不同颜色的不同图形
  • 你现在必须决定是哪一个（如果选择好/坏，那么......）

例子

先感谢您。

4

2 回答 2

1

您可能想知道刚刚单击的图形的颜色，所以我建议您这样做：

$(".kolo").on('click', function(){
    var color = $(this).css('background-color');
}

JsFiddle：http: //jsfiddle.net/F3HB5/

编辑 ：

根据您的代码，我已将您的 jsFiddle 更新为以下代码：http: //jsfiddle.net/8LFR7/3/。

有两个主要错误：

  1. 当你想定位一个 id 时，你必须#在 id -> 之前放一个$("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color')。
  2. 当您在测试之前移除您的图形时，您必须在移除之前捕获颜色并将其保存在某个变量中：这里我将它放在setTimeout块的开头：var targetColor = $("#" + wylosowane[losowa_z_wylosowanych_figur].figura).css('background-color');
于 2013-06-11T07:17:45.357 回答
0

首先是一个友好的建议，无论您属于哪种母语，请使用英语作为您的代码。

现在您的解决方案：您需要将单击的圆圈的背景颜色与三角形相匹配，因此您可以执行以下操作来实现此目的：

$(".kolo").on('click', function(event){
    var id = event.target.id; // For the id, but that does not matter, you can get it using the class also or this

    if($(id).css('background-color') == $('.odpowiedz_pojemnik').css('background-color')){
      alert('Good!');
    }
    else{
      alert('Bad!');
    }
}
于 2013-06-11T07:34:02.843 回答