0

Tengo un GRID, al hacer click dentro de una de las celdas ( DIV ) cambia de color, debo guardar ese cambio.

    <!-- Cambia la casilla en el grid -->
    <script type="text/javascript">
    $(document).on('click','#a', function() {
        $(this).toggleClass('bg-color');
    });
    </script>
    <!-- Cambia la casilla en el grid -->
        <div id="main-wrapper">
            <?php require 'inc/header.php'; ?>
            <div class="wrapper-pad">
                <h2>Posiciones Libres</h2>
                    <div id="table-head">

            <div>-------------------- Pasillo 1 Lado Y ----------------------</div>
                <div class="grid-container">
                    <div id="a">1</div>
                    <div id="a">2</div>
                    <div id="a">3</div>  
                    <div id="a">4</div>
                    <div id="a">5</div>
                    <div id="a">6</div>
                </div>

CSS

/* Cambia la casilla en el grid */
.grid-container > .bg-color{
    background-color: red;
}
4
  • Usa los atributos de html podría ser algo como cuando le das click, agregarle un atributo a ese elemento data-activado="true" Commented el 26 feb. 2019 a las 14:21
  • 1
    Tu pregunta es muy abstracta, necesitas definir un poco mejor tu intención. Cómo guardar el estado, hay millones de posibles respuestas. Es un dato que es persistente? Es un dato que se reutilizara en otras vistas o partes de la aplicación? Define mejor tu alcance y replantea tu pregunta, así cómo las cosas que has intentado.
    – manuerumx
    Commented el 26 feb. 2019 a las 14:22
  • En la programación todo es volátil a no ser que hagas algo para remediarlo. Los método de almacenamiento más usados son o Base de Datos o un fichero de texto, recomendándote lo primero por razones de organización, integridad y facilidad de acceso a los datos. Podrías tener en tu DB una tabla que almacene el estado de esos grids dependiendo del usuario (para que si existen más usuarios de tu aplicación no vean cosas que no pulsaron).
    – phpMyGuel
    Commented el 26 feb. 2019 a las 14:22
  • Al dar click sobre una casilla o DIV cambia de color, entonces solo debo guardar si ese DIV es de color rojo o normal. Commented el 26 feb. 2019 a las 14:34

3 respuestas 3

1

Como comenta @Daniel Mauricio Sánchez Ávila, usa atributos personalizados de HTML5 para mantener el control del cambio, una observación importante es hacerte notar que el valor del atributo id debe ser único e irrepetible. A continuación te propongo una solución a tu pregunta, observa que el valor del atributo id es diferente para cada caso y se usa un atributo class para poder identificar cuando haces clic en el elemento, además con ayuda de la función attr de jQuery obtenemos el valor del atributo data-statuscolor para posteriormente poder definir si se encuentra de color blanco o rojo en este caso.

<div id="main-wrapper">
        <div class="wrapper-pad">
            <h2>Posiciones Libres</h2>
                <div id="table-head">

        <div>-------------------- Pasillo 1 Lado Y ----------------------</div>
            <div class="grid-container">
                <div id="a" data-statuscolor="white" class="celda">1</div>
                <div id="b" data-statuscolor="white" class="celda">2</div>
                <div id="c" data-statuscolor="white" class="celda">3</div>  
                <div id="d" data-statuscolor="white" class="celda">4</div>
                <div id="e" data-statuscolor="white" class="celda">5</div>
                <div id="f" data-statuscolor="white" class="celda">6</div>
            </div>


<script type="text/javascript">
$(document).ready(function(){
    $(".celda").click(function(){
        $(this).toggleClass("bg-color");
        var currentColor =  $(this).attr("data-statuscolor");

        if(currentColor === "white"){
            newColor = "red";
        }else{
            newColor = "white";
        }
        $(this).attr("data-statuscolor", newColor);
    });
});
</script>
1
  • Muchas Gracias como podria guardar para que el cambio persista? Commented el 26 feb. 2019 a las 15:28
0

Saludos podrias hacer algo como esto:

  $(document).on('click','#a', function() {
        $(this).toggleClass('bg-color');
    });
    function validar(sender){
    	colorRojo_rgba='rgba(0, 0, 0, 0)';
      var div = document.getElementById(sender.id);
      var color = window.getComputedStyle( div,null).getPropertyValue('background-color'); 
      if(color == colorRojo_rgba){
       alert('Div color rojo, valor del div: '+div.innerHTML);
      }
    
    }//end function validar
.grid-container > .bg-color{
    background-color: red;
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="grid-container">
   <div id="a" onclick="validar(this);">1</div>
   <div id="b">2</div>
   <div id="c">3</div>  
   <div id="d">4</div>
   <div id="e">5</div>
   <div id="f">6</div>
</div>

si te fijas primero se define distintos id para cada div para diferenciarlos, ahora en el div uso un evento onclick el cual me permite invocar a una funcion de Javascript la misma mediante el id obtiene su estilo css(background-color), y hago una comparación si es rojo muestro su valor o texto contenido en el div.

Tan solo deberías adaptar este código a tus necesidades.espero te ayude ..suerte..!!

3
  • Muchas Gracias como podria guardar para que el cambio persista? Commented el 26 feb. 2019 a las 15:35
  • para guardar en donde en una DB ? y en que lenguaje php, mysql..? Commented el 26 feb. 2019 a las 15:36
  • Si PHP con Mysql Commented el 26 feb. 2019 a las 15:38
0

Para persistir el cambio puedes enviar el nuevo valor mediante AJAX de la siguiente manera:

<script type="text/javascript">
$(document).ready(function(){
    $(".celda").click(function(){
        $(this).toggleClass("bg-color");
        var currentColor =  $(this).attr("data-statuscolor");

        if(currentColor === "white"){
            newColor = "red";
        }else{
            newColor = "white";
        }
        $(this).attr("data-statuscolor", newColor);

        //enviar el nuevo color para persistencia en el backend
        $.ajax({
            url: 'ruta_al_archivo_realiza_persistencia.php',
            method: 'post',
            data: {newColor: newColor}, //el newColor de la izquierda es el nombre que recibirás en tu script php, el newcolor de la derecha es el valor de la variable
            success: functio(response){
                    //tu archivo de persistencia debe responder algo, en este ejemplo se supone que si responde exito el dato se guardo/actualizo de lo contrario ocurrió un error
                    if(response === 'exito'){
                        alert('Se actualizo el nuevo color!');
                    }else{
                        alert('Ocurrio un error al guardar el nuevo color');
                    }
            }
        })
    });
});
</script>
2
  • hice una pagina ejemplo.php y puse lo siguiente: <?php session_start(); $_SESSION["newColor"] = $_POST["newColor"]; ?> Commented el 26 feb. 2019 a las 22:44
  • No entiendo el por que usas la matriz superglobal $_SESSION[] aunque supongo que tendrás tus razones. dale un vistazo a geeksforgeeks.org/php-mysql-update-query
    – David Roa
    Commented el 27 feb. 2019 a las 14:42

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.