jquery - 使用包含 css 的 jQuery 函数

Question

我是编码的 super 新手，我正在尝试使用 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 属性对公共(public)元素进行分组。您还可以使用初始循环来构建 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>