Cambiar la propiedad de color CSS dinámicamente al hacer clic

Tengo una función que genera colores aleatorios, quiero usar esa función junto con la capacidad de jQuery para toggleClass de toggleClass al hacer clic. Quiero generar un color único para una celda de la table al hacer clic, y eliminar el color generado si el usuario hace clic en una celda de color nuevamente (que sea blanco nuevamente / incoloro).

Tabla HTML:

  

Función de generación de color:

  function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } 

Asignando el color a la celda:

 $( function(){ $('td').click( function(){ $(this).css('background-color',getRandomColor); }); }); 

Tenga en cuenta que las soluciones que usan 'rgba(0, 0, 0, 0)' solo funcionan en algunos navegadores (Chrome, pero no IE, por ejemplo). Esta versión obtiene el color del cuerpo como referencia (pero cualquier elemento sin background-colour conjunto de background-colour servirá).

Puedes cambiar tu código a una extensión jQuery, llamada toggleRandomColor como esta:

 var blankColor = $('body').css('background-color'); $.fn.toggleRandomColor = function () { if ($(this).css('background-color') == blankColor) { $(this).css('background-color', getRandomColor); } else { $(this).css('background-color', ''); } }; 

y luego simplemente usarlo de esta manera:

 $('td').click(function () { $(this).toggleRandomColor(); }); 

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nmav8d3n/4/

Simplemente agregue una clase cuando coloree la celda y verifique:

 $('td').click( function(){ var $td = $(this); if($td.hasClass('is-colour')) { $td.css('background-color','transparent') .removeClass('is-colour'); else { $td.css('background-color',getRandomColor()) .addClass('is-colour'); } }); 

No estoy seguro al 100% de que lo haya entendido correctamente, por lo que desea hacer clic en una celda y colorearla, si ya está coloreada, hacerla blanca.

si es así

 $( function(){ var default_background = 'rgba(0, 0, 0, 0)'; $('td').click( function(){ var $this = $(this), curr_background = $(this).css('background-color'); if (curr_background === default_background){ $this.css('background-color',getRandomColor); } else { $this.css('background-color', default_background); } }); }); 

y aquí está el fidle http://jsfiddle.net/qL10e5xd/

Verifique el valor predeterminado y luego genere un nuevo color, o elimínelo.

 function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $( function(){ $('td').click( function(){ if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)') { // if background-color isn't set, jQuery returns 'rgba(0, 0, 0, 0)' $(this).css('background-color',getRandomColor); } else { $(this).css('background-color',''); } }); }); 

http://jsfiddle.net/nmav8d3n/

Puedes usar este código

 $( function(){ var clicked = flase; $('td').click( function(){ if(!clicked){ $(this).css({'background-color',getRandomColor}); clicked = true; } else{ $(this).css({'background-color','white'}); clicked = false; } }); });