Question

var random;
var squareArray = [$('#square1'),$('#square2'),$('#square3'),$('#square4')];
var randomOrder = [];
var i = 0;
var j = 0;

function computerPlays() {
    random = Math.floor(Math.random() * 4);
    randomOrder.push(random);
    makeSquareBlink();
    userPlays();
}

function makeSquareBlink() {
    setTimeout(function() {
        var randomSquare = squareArray[randomOrder[i]];
        randomSquare.css('opacity', '0.5');
        setTimeout(function() {
            randomSquare.css('opacity', '1');
        }, 300);
        i++;
        if (i < randomOrder.length) 
            makeSquareBlink();
    }, 500);
}

function userPlays() {
    $('#square1').on('click', function() {
        if (randomOrder[j] === 0) {
            $('#square1').css('opacity', '0.5');
            setTimeout(function() {
                $('#square1').css('opacity', '1');
            }, 300);
        }
        else {  
            $('#counter').text('!!');
            makeSquareBlink();
        }
    });
    $('#square2').on('click', function() {
        if (randomOrder[j] === 1) {
            $('#square2').css('opacity', '0.5');
            setTimeout(function() {
                $('#square2').css('opacity', '1');
            }, 300);
        }
        else {  
            $('#counter').text('!!');
            makeSquareBlink();
        }
    });
    $('#square3').on('click', function() {
        if (randomOrder[j] === 2) {
            $('#square3').css('opacity', '0.5');
            setTimeout(function() {
                $('#square3').css('opacity', '1');
            }, 300);
        }
        else {  
            $('#counter').text('!!');
            makeSquareBlink();
        }
    });
    $('#square4').on('click', function() {
        if (randomOrder[j] === 3) {
            $('#square4').css('opacity', '0.5');
            setTimeout(function() {
                $('#square4').css('opacity', '1');
            }, 300);
        }
        else {  
            $('#counter').text('!!');
            makeSquareBlink();
        }
    });
}

function reset() {
    randomOrder = [];
    i = 0;
}

$('button').click(function() {
    reset();
    computerPlays();
});

为什么不能在makeSquareBlink函数中更改randomSquare变量的css属性？有什么办法吗？编辑＃001：现在添加完整代码仍然没有工作帮助。 man stackoverflow想要更多细节我应该输入更多吗？ FTHISS命中FML Fk所有letme发布它兄弟。你是我最后的希望：//

Answer 1

我猜游戏的目标是像以前一样点击同一个方块。正确？

您的代码存在的一个问题是makeSquareBlink()在计算机播放时将i增加1。然后，当用户在makeSquareBlink()内播放并点击错误的方块时，您尝试访问randomOrder[i]，其实际上正在调用randomOrder[1]，其返回undefined，因为randomOrder仅包含到目前为止一个元素。因此，squareArray[randomOrder[1]]会返回undefined，undefined.css(...)就是您得到的错误。

您可以通过在makeSquareBlink()方法中添加一个参数来修复它，使其读取

function makeSquareBlink(p) {
    setTimeout(function() {
        var randomSquare = squareArray[randomOrder[p]];
        randomSquare.css('opacity', '0.5');
        setTimeout(function() {
            randomSquare.css('opacity', '1');
        }, 300);
        p++;
        if (p < randomOrder.length) 
            makeSquareBlink(p);
    }, 500);
}

然后在computerPlays内，您将i称为param，将userPlays称为j。没有测试过，但我不想完全解决你的作业;）

还要重新考虑userPlays()内的事件侦听器附件，因为每次调用该方法时都会附加单击侦听器。我猜这不是你想要的。也许在这里尝试jQuerys one()方法。或者更好地重构代码，使点击监听器只附加一次。

这是一个帮助我调试代码的小提琴：https://jsfiddle.net/hm69ff0a/

无法读取未定义的属性CSS？

1 个答案: