Javascript 滚动数组onclick

如果问题是业余的，请原谅。 在点击按钮中，按钮的背景色必须更改为3种颜色。 我使用数组，在第一次点击时颜色必须是红色，第二次点击时颜色必须是蓝色、黑色并重置 所以我必须从索引0滚动数组。 这是一个代码，但不是工作

var color = ['red','blue','black'];
var calo = function() {
   for (var i=0 ; i<color.length ; i++)
    {
    return color[i];
    }  
};

var farbe = function(){
    return color[calo()]; 
};

    $('#c2').click(function() {
            $(this).css('background',farbe());
        });

var color=[‘红色’、‘蓝色’、‘黑色’]；
var calo=函数（）{
对于（var i=0；i您需要某种全局变量来跟踪当前颜色：

var currentColorIndex = 0;

var color = ['red','blue','black'];
var calo = function() {
    currentColorIndex++;
    if (currentColorIndex >= color.length) {
        currentColorIndex = 0;
    }  

    // alternative
    // currentColorIndex = (currentColorIndex++) % color.length;

    return currentColorIndex;
};

var farbe = function(){
    return color[calo()]; 
};

$('#c2').click(function() {
    $(this).css('background-color',farbe());
});

保持简单：

var color = ['red', 'blue', 'black'];
var colorIndex = 2;
$('#c2').click(function () {
    switch (colorIndex) {
        case 0:
            $('#c2').css('background', color[1]);
            colorIndex += 1;
            break;
        case 1:
            $('#c2').css('background', color[2]);
            colorIndex += 1;
            break;
        case 2:
            $('#c2').css('background', color[0]);
            colorIndex = 0;
            break;
    }

});

我没有对此进行测试，但我认为没有问题。
我从OP复制的代码不正确。修复了这一问题，并修复了calo方法的返回值。添加了working Fiddle。