-1

Debo implementar una esctructura de control para que cada vez que de click en un cuadro (DIV) cambie el color de fondo de rojo a negro y de negro a rojo cada vez que le de click

jQuery(function(){ 
    
        function cambiacolor(bgcolor){                      
            jQuery('#a').css('background-color',bgcolor);   
            
            if (bgcolor === '#292c33') 
            {
                bgcolor = "#e21a1a";
            }
            else
            {
                bgcolor = "#292c33";
            }
    
            //Cookies.set('colorCookie',bgcolor);             
        }
    
        jQuery('#a').css('background-color','#292c33'/*Cookies.get('colorCookie')*/);
    
        jQuery('#a').click(function(e){
            e.preventDefault();
            colorseleccionado = jQuery(this).data('color');
            cambiacolor(colorseleccionado);     
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="a" class="celda" data-color="#e21a1a">1</div>
<div id="b" class="celda" data-color="#e21a1a">2</div>

7
  • 1
    ¿Y cuál es el problema que tienes? Por otra parte, ¿almacenar en las cookies el valor lo haces por algún requerimiento en concreto?
    – Kiko_L
    el 5 mar. 2019 a las 14:04
  • Debo cambiar de color de fondo un DIV cada vez que le de click y ese cambio guardarlo en cookies, es para una estanteria cuando este de color rojo quiere decir que esta libre y se puede guardar algo en ella y cuando este llena se le da click para decir que esta ocupada tambien tengo la duda de como guardar diferentes posiciones es.stackoverflow.com/questions/242794/… el 5 mar. 2019 a las 14:09
  • ¿Es necesario guardar el color? ¿No te resulta mejor guardar el status (Disponible o Llena)? el 5 mar. 2019 a las 14:16
  • Como puedo hacer eso? el 5 mar. 2019 a las 14:17
  • Dame un minuto y formulo una respuesta el 5 mar. 2019 a las 14:17

2 respuestas 2

3

Yo lo plantearía con clases CSS:

  1. Definiría dos clases (libre y ocupada) con el background-color deseado.
  2. En el evento click de los elementos con clase celda usaría togleClass() para cambiar de una clase a otra.
  3. A las cookies no les veo el sentido en este contexto.

$(function(){ 

    function cambiacolor(div){                      
         $(div).toggleClass("libre ocupada");            
    }

    $('.celda').click(function(e){
        cambiacolor($(this));     
    });
});
.ocupada{
  background-color: Red;
}

.libre{
  background-color: Green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<div id="a" class="celda ocupada">1</div>
<div id="b" class="celda libre">2</div>

5
  • Ey! me has hecho trampas xD
    – track3r
    el 5 mar. 2019 a las 14:28
  • Había hecho la respuesta con hasClass, addClass y removeClass y para cuando he caído en el toggleClass ya he visto que lo tenías hecho XD. La voy a borrar porque no tiene sentiendo tener dos iguales :). Eso sí, ya que estás añade un snippet que funcione y algo de info sobre toggleClass
    – Kiko_L
    el 5 mar. 2019 a las 14:31
  • No la borres, estaría bien tener un ejemplo con hasClass, además, tu respuesta es más completa. Mejor borro la mía.
    – track3r
    el 5 mar. 2019 a las 14:32
  • Me parece que el hasClass es mejor en esta situación, ya que necesita no solo cambiar la clase, sino que también usar localStorage. Pero es debatible. el 5 mar. 2019 a las 14:36
  • Ah el localStorage o Cookies, puede tener sentido si está cargando contenido dinámicamente, si quiere reducir las llamadas a la base de datos o los procesos serverside, o si sencillamente está experimentando. el 5 mar. 2019 a las 14:38
2

Te recomendaría usar localStorage y clases, tu código quedaría de la siguiente manera:

var jQ = jQuery;
var estanteria = {};

jQ(document).ready(function(){

  jQ('.celda').each(function(){
    if(jQ(this).hasClass('llena'))estanteria[jQ(this).attr('id')] = 'llena';
    else estanteria[jQ(this).attr('id')] = 'vacia';
  });
  
  //localStorage.setItem('estanteria', JSON.stringify(estanteria));

  jQ('body').on('click', '.celda', function(){
    var id = jQ(this).attr('id');
    //estanteria = JSON.parse(localStorage.getItem('estanteria'));
    if(jQ(this).hasClass('llena')){
      estanteria[id] = 'vacia';
      jQ(this).removeClass('llena');
    }else{
      jQ(this).addClass('llena');
      estanteria[id] = 'llena';
    }
    console.log(estanteria);
    //localStorage.setItem('estanteria', JSON.stringify(estanteria))
  });
  
  //jQ('body').on('click', '#verLocalStorage', function(){
  
    //jQ('#contLocalStorage').html(localStorage.getItem('estanteria'));
  //});

});
/*Aquí puedes colocar*/

.celda{
  background: #292c33;
}

.celda.llena{
  background: #e21a1a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="a" class="celda llena">1</div>
<div id="b" class="celda">2</div>

<button id="verLocalStorage">Ver localStorage</button>

<div id="contLocalStorage"></div>

No me deja colocar localStorage, pero podrás probarlo en tu entorno.

Dime si tienes alguna duda.

11
  • Usé jQ porque asumí que no podías usar $ (Por ejemplo si estás trabajando con Typescript o algo por el estilo) el 5 mar. 2019 a las 14:40
  • Muchas gracias, fuinciona pero no me esta guardando los cambios el 5 mar. 2019 a las 14:45
  • Qué aparece cuando colocas console.log(localStorage.getItem('estanteria')); ? el 5 mar. 2019 a las 14:50
  • Dice que esta en 'null' el 5 mar. 2019 a las 14:52
  • ¿Quitaste los comentarios de los localStorage? //localStorage.setItem('estanteria', JSON.stringify(estanteria)); el 5 mar. 2019 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.