problema combinando .click con .mouseover

neoarcangel · #1 (**permalink**) 07/05/2015, 12:59

Hola, tengo un codigo que no entiendo por que falla, pienso que la sintaxis esta bien pero no me acaba de funcionar.

Código HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>

      <meta charset="UTF-8">
      
      <script type="text/javascript"  src="../../js/jqueryG.js">
    </script>

   <script type="text/javascript">
        $(document).ready(
                
                                function asignarAelementos()
                                            {
                                                $('#E').click(
                                                                        function acordeE()
                                                                                {
                                                                                    $('#sexta').mouseover
                                                                                                    (    
                                                                                                        function s6E()
                                                                                                            {
//                                                                                                                $(this).css('background','url(img/string2.jpg)');
                                                                                                                      
                                                                                                            }
                                                                                                     )
                                                                                     $('#sexta').mouseout
                                                                                                    (
                                                                                                        function s6no()
                                                                                                            {
                                                                                                                
                                                                                                            }
                                                                                                     )
                                                                                             
                                                                                        
                                                                                }
                                                        
                                                                   )  
                                                 $('#F').click(
                                                                        function acordeF()
                                                                                {
                                                                                            alert('xxosoeperico');
                                                                                }
                                                        
                                                                   )  
                                                  $('#G').click(
                                                                        function acordeG()
                                                                                {
//                                                                                    $(this).attr('value','');
                                                                                        $(this).val('');
                                                                                }
                                                        
                                                                   )  
                                                
                                                  
                                            }
                            )
    </script> 

 <link rel="stylesheet" type="text/css" href="css/guitarra.css" />
    <title>GUITARRA</title>
</head>
<body>
  
        <form action="" method="post">
            <input type="submit"  id="E" value="E"/>
            <input type="submit"  id="F" value="F"/>
            <input type="submit"  id="G" value="G"/>
<!--            <input type="submit" value="enviar" />-->
        </form>
    <div style="clear:both"></div>
    <div id="tablatura">
        <div class="espacio" ></div>
        <div class="cuerda" id="sexta"></div>
        <div class="espacio"></div>
        <div class="cuerda" id="quinta"></div> 
        <div class="espacio"></div>
        <div class="cuerda" id="cuarta"></div>
        <div class="espacio"></div>
        <div class="cuerda" id="tercera"></div>
        <div class="espacio"></div>
        <div class="cuerda" id="segunda"> </div>
        <div class="espacio"></div>
        <div class="cuerda" id="primera"></div>
        <div class="espacio"></div>
   
    </div>

   
</body>
</html>

El codigo en si es sencillo, lo que pasa es que la estructura principal se repite, la idea es que el codigo empiece a funcionar unica y exclusivamente cuando pulses un boton, una vez pulsado el boton, al pasar el raton por un div que contiene una imagen(esta definida como fondo en los estilos, una imagen por div), esta debe cambiar y solo mantenerse cuando el raton este sobre ella.

Una combinacion de .click con .mouseover y .mouseout, he probado que esta funcionando javscript por que he hecho un codigo mas simple con un alert y ha funcionado, pero en este caso pulso el boton y al mover el raton la imagen no cambia.

¿Que puede estar fallandome?

MaNuX0218 · #2 (**permalink**) 07/05/2015, 13:36

Puedes combinar de esta manera:

Código Javascript:

Ver original$("#id").on("click mouseover mouseout", function(){
  alert("Se ha echo click o el mouse se puso encima o el mouse se fue");
});

O si quieres algo mas obtimizado y limpio:

Código Javascript:

Ver originalvar Eventos = {
  click: function(){
    alert("Se ha echo click");
  },
  mouseover: function(){
    alert("El mouse se puso encima");
  },
  mouseout: function(){
    alert("El mouse se fue");
  }
};
$("#id").on(Eventos);

Un Saludo.

neoarcangel · #3 (**permalink**) 07/05/2015, 15:31

No, no es exactamente lo que busco.

Lo que busco es lo siguiente

3 botones, cada boton tiene determinadas notas que no pueden sonar a la vez, por lo que cuando le des a un boton, lo que haces es activar las notas de ese boton, pero las notas no sonaran hasta que pases el raton por encima de la nota.

Es decir cuando tu hagas un click a un boton, simplemente estas activando la posibilidad de hacer un mouseover y un mouseout, pero no tiene que funcionar automaticamente solo cuando pases el raton por encima de la nota que seria una imagen en un div.

Pienso que mi fallo tiene que ver con la encadenacion de eventos, pienso que por eso me falla,

Simplificando bastante lo esencial quedaria asi

Código HTML:

      function asignarAelementos()
                        {
                             $('#E').click
                                        (
                                      function acordeE()
                                                 {
                                            $('#sexta').mouseover
                                                           (
                                                     function s6E()
                                                                 {
                                                                   //NO FUNCIONA AQUI                                                        $('#sexta').css('background','url(img/string2.jpg)');
                                                                 alert('DEBERIA MOSTRAR ESTO');
                                                                   }
                                            
                                                              )
                                                     }
                                           )  
                                                  
                          }
                              )

MaNuX0218 · #4 (**permalink**) 08/05/2015, 01:04

Creo que con lo que te he mostrado puedes combinar perfectamente lo que intentas hacer, sólo es cuestión de ir adaptandolo.

Saludos.

elmouse19 · #5 (**permalink**) 11/05/2015, 14:45

No tengo tiempo ahora de probarlo. Y leyendo el código parece estar bien.
Lo único que noto raro es que al final de todo hay un ")" de más.

Revisa que no este sobrando porque a veces esas cosas tan simples rompen todo el código.