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>