2

Estoy trabajando con HTML5, CSS, Bootrap y JQuery. El problema no es cambiar el color a el div, lo que no logro hacer es que se ejecute la accion hasta que se de click a alguno de los divs. Al dar click en el button de pago para horas extra, toma el color del boton y ese lo aplica a los divs del grid. Lo que quiero lograr es que no comience a cambiar el color hasta que se de click nuevamente sobre alguno de los divs de la grilla. Espero puedan ayudarme. Gracias.

$(document).ready(function() {
  var cons = 21;

  $("#btn_pago_horas_extra_1").click(function() {
    var btn_1 = $("#btn_pago_horas_extra_1").css("background-color");

    for (var i = 1; i <= cons; i++) {
      $("#calendar_" + i).hover(function() {
        $(this).css("background-color", "yellow");
      }, function() {
        $(this).css("background-color", btn_1);
      });
    }
  });
});

$(document).ready(function() {
  var cons = 21;

  $("#btn_pago_horas_extra_2").click(function() {
    var btn_1 = $("#btn_pago_horas_extra_2").css("background-color");

    for (var i = 1; i <= cons; i++) {
      $("#calendar_" + i).hover(function() {
        $(this).css("background-color", "yellow");
      }, function() {
        $(this).css("background-color", btn_1);
      });
    }
  });
});
.grid-container-dias {
  display: grid;
  display: -ms-flexbox;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  -ms-grid-columns: 25px 10px 25px 10px 25px;
  -ms-grid-rows: 25px 10px 25px;
  grid-gap: 1px;
  -ms-grid-grap: 1px;
  background-color: transparent;
  padding: 5px;
}

.grid-container-dias>div {
  background-color: transparent;
  ;
  text-align: center;
  padding: 0 0;
  font-size: 11px;
  width: 143px;
  height: 10px;
}

.grid-container {
  display: grid;
  display: -ms-flexbox;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  -ms-grid-columns: 25px 10px 25px 10px 25px;
  -ms-grid-rows: 25px 10px 25px;
  grid-gap: 8px;
  background-color: transparent;
  padding: 5px;
}

.grid-container>div {
  background-color: #d5d5d5;
  ;
  text-align: center;
  padding: 15px 0;
  font-size: 11px;
  width: 143px;
  height: 10px;
}

.text-horas-superior {
  position: relative;
  top: -22px;
  left: 11px;
  font-size: 12px;
}

.text-horas-inferior {
  position: relative;
  top: -11px;
  left: 10px;
  font-size: 12px;
}

.text-horas-resto {
  position: relative;
  top: 8px;
  left: 11px;
  font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12 col-md-9">
    <div class="table-responsive">
      <div class="row">
        <div class="col-md-12">
          <div class="grid-container-dias">
            <div style="background-color: transparent; width: 43px; position: relative;"></div>
            <div class="text-calendario tamanio-fuente-12">DOMINGO</div>
            <div class="text-calendario tamanio-fuente-12">LUNES</div>
            <div class="text-calendario tamanio-fuente-12">MARTES</div>
            <div class="text-calendario tamanio-fuente-12">MIERCOLES</div>
            <div class="text-calendario tamanio-fuente-12">JUEVES</div>
            <div class="text-calendario tamanio-fuente-12">VIERNES</div>
            <div class="text-calendario tamanio-fuente-12">SABADO</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="grid-container">
            <div style="background-color: transparent; width: 43px; position: relative;">
              <span class="text-horas-superior">00:00</span><br/>
              <span class="text-horas-inferior">01:00</span>
            </div>
            <div id="calendar_1"></div>
            <div id="calendar_2"></div>
            <div id="calendar_3"></div>
            <div id="calendar_4"></div>
            <div id="calendar_5"></div>
            <div id="calendar_6"></div>
            <div id="calendar_7"></div>
            <div style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">02:00</span></div>
            <div id="calendar_8"></div>
            <div id="calendar_9"></div>
            <div id="calendar_10"></div>
            <div id="calendar_11"></div>
            <div id="calendar_12"></div>
            <div id="calendar_13"></div>
            <div id="calendar_14"></div>
            <div style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">03:00</span></div>
            <div id="calendar_15"></div>
            <div id="calendar_16"></div>
            <div id="calendar_17"></div>
            <div id="calendar_18"></div>
            <div id="calendar_19"></div>
            <div id="calendar_20"></div>
            <div id="calendar_21"></div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-12 col-md-12">
      <input id="btn_pago_horas_extra_1" name="btn_pago_horas_extra_1" type="button" class="btn form-control" style="background-color:#3d6cb2;" value="$ 85 por hora" />
    </div>
  </div>
  <div class="espacio-blanco espacio-ex-pequeño"></div>
  <div class="row">
    <div class="col-12 col-md-12">
      <input id="btn_pago_horas_extra_2" name="btn_pago_horas_extra_2" type="button" class="btn form-control" style="background-color:#21aad6;" value="$ 110 por hora" />
    </div>
  </div>

2 respuestas 2

3

Solo tienes que cambiar el hover por click asi:

$(document).ready(function() {
  var cons = 21;
  var btn_1 = "";
  
  for (var i = 1; i <= cons; i++) {
    $("#calendar_" + i).click(function() {
      for (var i = 1; i <= cons; i++) {
        $("#calendar_" + i).hover(function() {
          $(this).css("background-color", "yellow");
        }, function() {
          $(this).css("background-color", btn_1);
        });
      }
    });
  }

  $("#btn_pago_horas_extra_1").click(function() {
    btn_1 = $("#btn_pago_horas_extra_1").css("background-color");    
  });

  $("#btn_pago_horas_extra_2").click(function() {
    btn_1 = $("#btn_pago_horas_extra_2").css("background-color");
  });
});
.grid-container-dias {
  display: grid;
  display: -ms-flexbox;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  -ms-grid-columns: 25px 10px 25px 10px 25px;
  -ms-grid-rows: 25px 10px 25px;
  grid-gap: 1px;
  -ms-grid-grap: 1px;
  background-color: transparent;
  padding: 5px;
}

.grid-container-dias>div {
  background-color: transparent;
  ;
  text-align: center;
  padding: 0 0;
  font-size: 11px;
  width: 143px;
  height: 10px;
}

.grid-container {
  display: grid;
  display: -ms-flexbox;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  -ms-grid-columns: 25px 10px 25px 10px 25px;
  -ms-grid-rows: 25px 10px 25px;
  grid-gap: 8px;
  background-color: transparent;
  padding: 5px;
}

.grid-container>div {
  background-color: #d5d5d5;
  ;
  text-align: center;
  padding: 15px 0;
  font-size: 11px;
  width: 143px;
  height: 10px;
}

.text-horas-superior {
  position: relative;
  top: -22px;
  left: 11px;
  font-size: 12px;
}

.text-horas-inferior {
  position: relative;
  top: -11px;
  left: 10px;
  font-size: 12px;
}

.text-horas-resto {
  position: relative;
  top: 8px;
  left: 11px;
  font-size: 12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12 col-md-9">
    <div class="table-responsive">
      <div class="row">
        <div class="col-md-12">
          <div class="grid-container-dias">
            <div style="background-color: transparent; width: 43px; position: relative;"></div>
            <div class="text-calendario tamanio-fuente-12">DOMINGO</div>
            <div class="text-calendario tamanio-fuente-12">LUNES</div>
            <div class="text-calendario tamanio-fuente-12">MARTES</div>
            <div class="text-calendario tamanio-fuente-12">MIERCOLES</div>
            <div class="text-calendario tamanio-fuente-12">JUEVES</div>
            <div class="text-calendario tamanio-fuente-12">VIERNES</div>
            <div class="text-calendario tamanio-fuente-12">SABADO</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="grid-container">
            <div style="background-color: transparent; width: 43px; position: relative;">
              <span class="text-horas-superior">00:00</span><br/>
              <span class="text-horas-inferior">01:00</span>
            </div>
            <div id="calendar_1"></div>
            <div id="calendar_2"></div>
            <div id="calendar_3"></div>
            <div id="calendar_4"></div>
            <div id="calendar_5"></div>
            <div id="calendar_6"></div>
            <div id="calendar_7"></div>
            <div style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">02:00</span></div>
            <div id="calendar_8"></div>
            <div id="calendar_9"></div>
            <div id="calendar_10"></div>
            <div id="calendar_11"></div>
            <div id="calendar_12"></div>
            <div id="calendar_13"></div>
            <div id="calendar_14"></div>
            <div style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">03:00</span></div>
            <div id="calendar_15"></div>
            <div id="calendar_16"></div>
            <div id="calendar_17"></div>
            <div id="calendar_18"></div>
            <div id="calendar_19"></div>
            <div id="calendar_20"></div>
            <div id="calendar_21"></div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-12 col-md-12">
      <input id="btn_pago_horas_extra_1" name="btn_pago_horas_extra_1" type="button" class="btn form-control" style="background-color:#3d6cb2;" value="$ 85 por hora" />
    </div>
  </div>
  <div class="espacio-blanco espacio-ex-pequeño"></div>
  <div class="row">
    <div class="col-12 col-md-12">
      <input id="btn_pago_horas_extra_2" name="btn_pago_horas_extra_2" type="button" class="btn form-control" style="background-color:#21aad6;" value="$ 110 por hora" />
    </div>
  </div>

3
  • Gracias, realmente me sirvió, pero lo que quiero lograr es que se realice el efecto como lo tengo, pero hasta que des click en un div comience a pintar en ese momento sin estar clickeando uno por uno. el 9 ago. 2018 a las 23:21
  • Ya edite mi respuesta.
    – alanfcm
    el 9 ago. 2018 a las 23:32
  • 1
    Muchas gracias amigo, en verdad eres un genio, es justo lo que necesitaba. Funciona perfectamente. el 10 ago. 2018 a las 2:48
0

Hola espero ser de ayuda,

primer no es nesesario declarar dos vese document ready.

ahora con respecto a tu pregunta a todos los id le pones una clase como asi

<div id="calendar_11" class"activo"></div>

lo que haces con esa class es detectar si la clickearon con un evento como este

  $(".activo").click(function() {
      let elemento = $(this).attr("id");
      console.log( $('#'+elemento).attr("class"));
      $('#'+elemento).toggleClass("azul")
      console.log( $('#'+elemento).attr("class"));
  });

ademas creas una clase de css con el color en mi caso azul con el color que quieras

.azul{
   background-color : #3d6cb2 !important;
}

ahora para ver si este fue clickeado compruebas la clase azul,

otra forma es crear otro div el cual lo insertas como hijo al cual le das colores.

te dejo el ejemplo

saludos

Tu Respuesta

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

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