Question

function computerPlays() {
    random = Math.floor(Math.random() * 4) + 1;
    arr.push(random);
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === 1) {
            square1.css('opacity', '0.5');
            setTimeout(function() {
                square1.css('opacity', '1')
            }, 500);
        else if (arr[i] === 2) {
            square2.css('opacity', '0.5');
            setTimeout(function() {
                square2.css('opacity', '1')
            }, 500);
        else if (arr[i] === 3) {
            square3.css('opacity', '0.5');
            setTimeout(function() {
                square3.css('opacity', '1')
            }, 500);
        else if (arr[i] === 4) {
            square4.css('opacity', '0.5');
            setTimeout(function() {
                square4.css('opacity', '1')
            }, 500);
        }
    }
}

所有if if都是相似的，只有测试条件中的值和每个if中的平方数变化如何才能避免这种重复并迭代这段代码。

Answer 1

您可以将正方形存储在数组中：

squareArray = [square1, square2, square3...]

然后你可以这样做：

squareArray[arr[i] - 1].css('opacity', '0.5');
setTimeout(function() {
    squareArray[arr[i] - 1].css('opacity', '1')
}, 500);

使用数字来索引右方。记得减一，因为数组是0索引的。

编辑评论中提出的好处是，如果您遇到此解决方案的问题，您可能会遇到关闭问题。最好的是，首先分配变量并通过函数传递它：

var square = squareArray[arr[i] - 1];

square.css('opacity', '0.5');
setTimeout(function(s) { return function() {
    s.css('opacity', '1')
}}(square), 500);

Answer 2

使用jQuery的内置函数来完成您的工作：

var squares = [ square1, square2, square3, square4 ];

function computerPlays()
{
  var i, random;

  random = Math.floor(Math.random() * 4) + 1;
  arr.push(random);

  for (i = 0; i < arr.length; i++)
  {
    squares[arr[i] - 1].fadeTo(0.5)
      .delay(500).fadeTo(1);   // <---- fadeTo() and delay() is what you really want
  }
}

根本不要使用setTimeout（），而是使用纯jQuery。

Answer 3

function computerPlays() {
    random = Math.floor(Math.random() * 4) + 1;
    arr.push(random);
    for (var i = 0; i < arr.length; i++) {
        $('#square'+i).css('opacity', '0.5');
        setTimeout(function() {
            square1.css('opacity', '1')
        }, 500);
    }
}

你也可以改变这个从这个方块的函数重复调用的东西。

Answer 4

你可以像这样定义你的方格：

false

然后在循环中使用它，如下所示：

var squares = [0, square1, square2, square3, square4]

如何迭代这段代码并缩短它？

4 个答案: