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>

使用包含css的jQuery函数

1 个答案: