Combine between mouseover and click on jquery

Question

Combine between mouseover and click on jquery

Navigation

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

1

I'm a bit of a rookie in jquery, to see if you can help me. I'm making a page to show weather forecast maps according to the forecast time. I want to combine mouseover and click to view these maps. I have 2 buttons. I want that when pressing a button the maps are seen passing the mouse over the hour (with mouseover), and when pressing another button they are visualized only doing click in the hour (with click). For now it works only the first time, by clicking on the "No click" button, I always visualize the maps with mouseover, still pressing the "With click" button again.

The html buttons are

input type="button" name="boton" id="boton" value="Con click"      
input type="button" name="boton2" id="boton2" value="Sin click"

y el código de jquery es 

$("#boton2").on("click",function(){
   $('.class_seleccion_pronostico').mouseover(function() {
    ........aqui va el codigo para pasar los mapas....
});
});

$("#boton").on("click",function(){
   $('.class_seleccion_pronostico').click(function() {
    ...........aqui va el mismo código que arriba.....
});
});

Thank you very much. Greetings.

jquery

asked by nico 12.02.2018 в 23:29

source

2 answers

read a .json file in angularjs Create Array in a stored procedure

score 0 · Answer 1

Just as you use on to associate a function with an event you can use off to disassociate it:

function mostrar(){
  // Código a ejecutar en el evento
  // ....
  console.log('Mostrar pronóstico');
}

$("#boton2").click(function(){
   // Eliminar controlador de click
   $('.class_seleccion_pronostico').off('click', mostrar);
   // Añade controlador a mouseover
   $('.class_seleccion_pronostico').on('mouseover', mostrar);
});

$("#boton").click(function(){
   // Elimina controlador de mouseover
   $('.class_seleccion_pronostico').off('mouseover', mostrar);
   // Añade controlador a click
   $('.class_seleccion_pronostico').on('click', mostrar);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boton">Botón con click</button>
<button id="boton2">Botón con mouseover</button>

<div class="class_seleccion_pronostico">Hora</div>

score 0 · Answer 2

As a recommendation you should not use on in functions that are executed several times like the example above because if you do not have control over the functions, these will be "glued" to the element and each Once the determined function is performed, N has been assigned.

     
$('#btnShow').attr("onmouseover","mostrar();");

function mostrar(){
  // Código a ejecutar en el evento
  console.log('Mostrar pronóstico');
}

function mostrarClick(){
  // Setea el atributo onclick con la funcion y mouseover se limpia
  $('#btnShow').attr("onclick","mostrar();");
  $('#btnShow').attr("onmouseover","");
}

function mostrarMouseover(){
 // Setea el atributo mouseover con la funcion y onclick se limpia
  $('#btnShow').attr("onmouseover","mostrar();");
  $('#btnShow').attr("onclick","");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boton" onclick="mostrarClick();">Botón con click</button>
<button id="boton2" onclick="mostrarMouseover();">Botón con mouseover</button>

<div id="btnShow" class="class_seleccion_pronostico" onclick="" onmouseover="" >Hora</div>