Stop hover with a jQuery click

Question

Stop hover with a jQuery click

Navigation

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

0

I am working with HTML5, Bootstrap, JQuery and CSS 3, I have a grid in which the div starts to be marked according to the color of the selected button, the div is not started until you click where you want to go start painting. This is where the problem is, by giving another click you must stop doing the hover, apparently it does, but it is only an effect because if I pass over the div that they have already painted they start painting again of the same color of those that are not marked. The question is:

How to stop the hover by clicking where you want to stop making the color change to the div?

That when choosing another button of a different color, the same action was performed.?

function rgb2hex(rgb) {
  if (/^#[0-9A-F]{6}$/i.test(rgb))
    return rgb;

  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

$(document).ready(function() {
  let cons = 168;
  let btn_1 = "";
  let price = "";
  let matriz = [];
  let color = false;

  for (var i = 1; i <= cons; i++) {
    $("#calendar_" + i).click(function() {
      if (!color) {
        color = true;
        for (let i = 1; i <= cons; i++) {
          $("#calendar_" + i).hover(function() {
            $(this).css('background-color', 'yellow');
          }, function() {
            //establece los valores en los divs como atributos
            $(this).css("background-color", btn_1);
            $(this).attr("data-color", btn_1);
            $(this).attr("price", price);

            //Pasa el valor rgb a hexadecimal
            var hex = rgb2hex($(this).attr("data-color"));

            //Asigna valores a las variables con los valores obtenidos de los atributos
            var arr1 = $(this).attr("id");
            var arr2 = hex;
            var arr3 = $(this).attr("price");

            //Concatena los valores en 1 cadena separada por comas
            var rest = arr1.concat(",", arr2, ",", arr3);

            //Genera un array con los valores de la concatenacion
            matriz.push(rest);
          });
        }
      } else {
        color = false;
        for (let i = 1; i <= cons; i++) {
          $("#calendar_" + i).hover(function(e) {
            e.preventDefault();
            $(this).css("background-color", "");
          }, function() {
            $(this).css("background-color", "");
          });
        }
      }
    });
  }

  $(document).on('click', 'input[type="button"]', function() {
    let id = this.id;
    btn_1 = $("#" + id).css("background-color");
    price = $("#" + id).attr("price");
  });
});

.grid-container-dias {
  display: grid;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-gap: 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;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  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;
}

.btn-pago-hora-extra-1 {
  background-color: #3d6cb2;
}

.btn-pago-hora-extra-2 {
  background-color: #21aad6;
}

.btn-pago-hora-extra-3 {
  background-color: #3bbdb8;
}

<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.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="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 id="grid" 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 style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">04:00</span></div>
          <div id="calendar_22"></div>
          <div id="calendar_23"></div>
          <div id="calendar_24"></div>
          <div id="calendar_25"></div>
          <div id="calendar_26"></div>
          <div id="calendar_27"></div>
          <div id="calendar_28"></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-pago-hora-extra-1" price="85" value="$ 85 por hora" />
  </div>
</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-pago-hora-extra-2" price="110" value="$ 110 por hora" />
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-12">
    <input id="btn_pago_horas_extra_3" name="btn_pago_horas_extra_3" type="button" class=" btn-pago-hora-extra-3" price="150" value="$ 150 por hora" />
  </div>
</div>

javascript jquery html5 css3 bootstrap

asked by leo_vilchis 03.09.2018 в 20:07

source

2 answers

Error in MainActivity.java - R: Gradle sync failed: Failed to find target with hash string 'android-27 node js synchronous query

score 0 · Answer 1

The part of the "hover" I would do with css with the property :hover and then clicking on the object would add a class since the more specific is the css selector the more priority it will have, this way I added these classes

.grid-container div:hover {
  background-color: yellow;
}

.grid-container div.clicked {
  background-color: blue;
}

the second css selector has a level of accuracy so it will have more priority than the hover

function rgb2hex(rgb) {
  if (/^#[0-9A-F]{6}$/i.test(rgb))
    return rgb;

  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

$(document).ready(function() {
  let cons = 168;
  let btn_1 = "";
  let price = "";
  let matriz = [];
  let color = false;

  // funcion para agregar clase "clicked" a los cuadrados grises
  $(document).on('click', '#grid div', function(){
    $(this).toggleClass('clicked');
  })

  $(document).on('click', 'input[type="button"]', function() {
    let id = this.id;
    btn_1 = $("#" + id).css("background-color");
    price = $("#" + id).attr("price");
  });
});

.grid-container-dias {
  display: grid;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-gap: 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;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  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;
}

.btn-pago-hora-extra-1 {
  background-color: #3d6cb2;
}

.btn-pago-hora-extra-2 {
  background-color: #21aad6;
}

.btn-pago-hora-extra-3 {
  background-color: #3bbdb8;
}



.grid-container div:hover {
  background-color: yellow;
}

.grid-container div.clicked {
  background-color: blue;
}

<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.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="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 id="grid" 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 style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">04:00</span></div>
          <div id="calendar_22"></div>
          <div id="calendar_23"></div>
          <div id="calendar_24"></div>
          <div id="calendar_25"></div>
          <div id="calendar_26"></div>
          <div id="calendar_27"></div>
          <div id="calendar_28"></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-pago-hora-extra-1" price="85" value="$ 85 por hora" />
  </div>
</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-pago-hora-extra-2" price="110" value="$ 110 por hora" />
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-12">
    <input id="btn_pago_horas_extra_3" name="btn_pago_horas_extra_3" type="button" class=" btn-pago-hora-extra-3" price="150" value="$ 150 por hora" />
  </div>
</div>

score 0 · Answer 2

I already solved it, I leave what worked for me in the way I require it in case someone serves him. Thank you all for your answers.

function rgb2hex(rgb) {
  if (/^#[0-9A-F]{6}$/i.test(rgb))
    return rgb;

  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

  function hex(x) {
    return ("0" + parseInt(x).toString(16)).slice(-2);
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}


$(document).ready(function() {
  let cons = 168;
  let btn_1 = "";
  let price = "";
  let matriz = [];
  let color = false;

  for (var i = 1; i <= cons; i++) {
    $("#calendar_" + i).click(function() {
      if (!color) {
        color = true;
        for (let i = 1; i <= cons; i++) {
          $("#calendar_" + i).hover(function() {
            $(this).css('background-color', btn_1);
          }, function() {
            //establece los valores en los divs como atributos
            $(this).css("background-color", btn_1);
            $(this).attr("data-color", btn_1);
            $(this).attr("price", price);

            //Pasa el valor rgb a hexadecimal
            var hex = rgb2hex($(this).attr("data-color"));

            //Asigna valores a las variables con los valores obtenidos de los atributos
            var arr1 = $(this).attr("id");
            var arr2 = hex;
            var arr3 = $(this).attr("price");

            //Concatena los valores en 1 cadena separada por comas
            var rest = arr1.concat(",", arr2, ",", arr3);

            //Genera un array con los valores de la concatenacion
            matriz.push(rest);
          });
        }
      } else {
        color = false;
        for (let i = 1; i <= cons; i++) {
          $("#calendar_" + i).unbind("mouseenter mouseleave");
        }
      }
    });
  }

  $(document).on('click', 'input[type="button"]', function() {
    let id = this.id;
    btn_1 = $("#" + id).css("background-color");
    price = $("#" + id).attr("price");
  });
});

.grid-container-dias {
  display: grid;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-gap: 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;
  height: auto;
  align-content: center;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  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;
}

.btn-pago-hora-extra-1 {
  background-color: #3d6cb2;
}

.btn-pago-hora-extra-2 {
  background-color: #21aad6;
}

.btn-pago-hora-extra-3 {
  background-color: #3bbdb8;
}

<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.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="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 id="grid" 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 style="background-color: transparent; width: 43px; position: relative;"><span class="text-horas-resto">04:00</span></div>
          <div id="calendar_22"></div>
          <div id="calendar_23"></div>
          <div id="calendar_24"></div>
          <div id="calendar_25"></div>
          <div id="calendar_26"></div>
          <div id="calendar_27"></div>
          <div id="calendar_28"></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-pago-hora-extra-1" price="85" value="$ 85 por hora" />
  </div>
</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-pago-hora-extra-2" price="110" value="$ 110 por hora" />
  </div>
</div>
<div class="row">
  <div class="col-12 col-md-12">
    <input id="btn_pago_horas_extra_3" name="btn_pago_horas_extra_3" type="button" class=" btn-pago-hora-extra-3" price="150" value="$ 150 por hora" />
  </div>
</div>

in the else of the condition the event hover() had to be changed by unbind() remaining as follows $("#calendar_" + i).unbind("mouseenter mouseleave"); with this it was solved and works in the expected way, by clicking for the second time the hover stops and it does not continue until you click again on another section of the grid, either choosing another color or with the same one already chosen.