Resolver duda con evento click

Buena tarde para todos

Tengo el siguiente código que lo que hace es cambiar el color de un cuadro cuando se hace click :

Código Javascript :

$(document).on('ready', inicio);
function inicio ()
{

$("#data-table-rh .real-data").on("click", cambiarColor);
}
function cambiarColor () {

var color =
{
background: '#000000'
}
$(this).css(color);
}

Ahora, en éste código me cambia el color actual por el color negro. Mi pregunta viene aqui:

Cómo hago para que cuando le dé click nuevamente al mismo cuadro me vuelva a cambiar el color de negro a rojo por ejemplo, y si le doy un nuevo click que me cambie el color de rojo a azul.
Necesito ésto para hacerlo con 4 colores cada uno asociado a un click en el mismo objeto (cuadro).
Gracias

Por lo que he entendido tienes varios cuadros con la clase "real-data" y quieres que cada uno cambie su color de background independientemente al hacerle clik.

Veamos como hacerlo

Código Javascript :

//Primero configuramos nuestro documentReady
$(document).ready(agregarPasos);

//Y su única función asociada
function agregarPasos () {
    /**
        Lo que vamos a hacer es agregar a cada '.real-data'
        un contador (variable int) y lo setearemos en 0
        
        Por lo que mediante un buucle each de jQuery
        Mandamos cada caja la función agregarPaso que haremos ahora
    **/
    $("#data-table-rh .real-data").each(agregarPaso)
}

/**
    Creamos la función agregarPaso que cogera cada objeto
    y le añadirá la propiedad paso = 0
**/
function agregarPaso () {this.paso = 0}

/**
    Creamos un array con los colores que queramos
    En este caso: negro, rojo, azul, verde
**/
var colores = ['#000', '#f00', '#00f', '#0f0'];

/**
    Ahora depende de la versión que uses de jQuery
    asocias los eventos de una manera u otra

    En la version 1.7 se pueden asociar con live y desasociar con die.

    Además no es necesario ejecutarlo en doc.ready
    pues live y die asocia y desasocia los eventos a los elementos 
    en vivo, es decir según se crean o eliminan
    
    En la 1.9 ha vuelto a asociarse con on y off
    http://jquery.com/upgrade-guide/1.9/#live-removed
    
    Asociamos el click a los elementos
    y le damos de callback cambiarColor
**/
$("#data-table-rh .real-data").live('click', cambiarColor);

function cambiarColor () {
    //Extraemos la propiedad paso de el objeto clickeado
    var paso = this.paso;
    
    //Y ponemos el color correspondiente en el background
    $(this).css('background', colores[paso]);
    
    /**
        Ahora mediante un condicional chequeamos si la variable paso
        ha llegado al máximo de colores
        
        Y si ha llegado, ponemos a 0 la propiedad paso
    **/
    if (paso == colores.length-1) this.paso = 0;
    //Y si no ha llegado incrementamos paso en 1
    else this.paso++;
}

Limpio:

Código Javascript :

$(document).ready(agregarPasos);
function agregarPasos () {
    $("#data-table-rh .real-data").each(agregarPaso)
}

function agregarPaso () {this.paso = 0}

var colores = ['#000', '#f00', '#00f', '#0f0'];

$("#data-table-rh .real-data").live('click', cambiarColor);

function cambiarColor () {
    var paso = this.paso;
   
    $(this).css('background', colores[paso]);
   
    if (paso == colores.length-1) this.paso = 0;
    else this.paso++;
}

Espero te sirva,
Un saludo!