使用包含css的jQuery函数

Question

我对编码非常陌生，我试着用jQuery制作一个简单的彩色游戏。为了简短，4个选项，点击右边的一个，一个警报弹出。我随机地将答案与其他虚拟人放在一个数组( colors[] )中，然后使用该数组将其放入css中。

  var dummy = '#aaa';
  var answer = '#ee00aa';

  var colors = [dummy,answer,dummy,dummy];

  for (var i = 1; i <= 4; i++) {
    $('#colorBox'+i).css('background', ''+colors[i-1]+'');
  }

  $('#colorBox'+i).click(function() {
    if ($(this).css('background', ''+colors[answer]+'') == true) {
      alert("Gratz!");
    }

问题是，我找不到一种方法来定义这个点击函数的答案。谢谢。

Answer 1

上面的代码有几个问题。

• 在条件下使用css()的getter，并将其直接与answer字符串进行比较，因为colors[answer]是无效的。
• 您不需要重复追加空字符串。
• 您应该将click处理程序代码放入循环中，因为它依赖于i变量。

然而，这一逻辑还有一个最终的、更大的问题。也就是说，当从CSS属性检索颜色时，一些浏览器返回十六进制值，而另一些浏览器返回RGB值。因此，您与十六进制值的比较将很容易被打破。

更好的解决方案是将类应用于元素，以便更容易地确定哪一个是正确的答案。您还可以使用类将公共元素分组为单个而不是增量的id属性。您还可以使用初始循环来构建HTML。就像这样：

​

var classes = ['d', 'a', 'd', 'd'];
var $container = $('.container');

var html = '';
for (var i = 0; i < classes.length; i++) {
	html += '<div class="colorbox ' + classes[i] + '"></div>';
}
$container.append(html).on('click', '.colorbox', function() {
    if ($(this).hasClass('a')) {
        alert("Gratz!");
    }
});

.colorbox {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}
.colorbox.a {
    background-color: #ee00aa;
}
.colorbox.d {
    background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

​