hover with jQuery when you click on div

Question

hover with jQuery when you click on div

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I'm working with HTML5, CSS, Bootrap and JQuery. The problem is not to change the color to the div, what I can not do is to execute the action until you click on one of the divs. When you click on the payment button for extra hours, take the color of the button and that applies it to the divs of the grid. What I want to achieve is that you do not start to change the color until you click again on any of the divs in the grid. I hope you can help me. Thanks.

$(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>

javascript jquery css3 bootstrap-4

asked by leo_vilchis 09.08.2018 в 23:37

source

2 answers

0

Hello I hope to be of help,

The first one is not necessary to declare two vese document ready.

now with respect to your question to all the id you put a class as well

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

what you do with that class is to detect if you clicked it with an event like this

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

you also create a css class with the color in my case blue with the color you want

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

now to see if this was clicked you check the blue class,

Another way is to create another div which you insert as a child to which you give colors.

I leave you the example

greetings

answered by 10.08.2018 в 00:25

set as value 0 if the input is empty Run two programs at the same time

score 3 · Accepted Answer

You just have to change the hover for click like this:

$(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>