Problema encadenando .click con .mouseover en jquery
Hola, tengo un código que no entiendo por que falla, pienso que la sintaxis esta bien pero no me acaba de funcionar.
<script type="text/javascript">
$(document).ready(
function asignarAelementos()
{
$('#E').click
(
function acordeE()
{
$('#sexta').mouseover
(
function s6E()
{
//NO FUNCIONA AQUI $('#sexta').css('background','url(img/string2.jpg)');
alert('DEBERIA MOSTRAR ESTO');
}
)
}
)
}
)
)
</script> Lo que busco es lo siguiente
3 botones, cada botón tiene determinadas notas que no pueden sonar a la vez, por lo que cuando le des a un botón, simplemente estas activando la posibilidad de hacer un mouseover y un mouseout, pero no tiene que funcionar automáticamente solo cuando pases el ratón 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.
Espero me podías ayudar.
Gracias.
1 respuesta
a ver si te entendí... ¿algo así?
<html>
<head>
<title>
Evento mouse click
</title>
<style>
div{
border: 1px solid #dadada;
background: darkred;
}
#d1{
display: block;
width: 40px;
height:40px;
position: absolute;
top: 120px;
left: 100px;
}
#d2{
display: block;
width: 40px;
height:40px;
position: absolute;
top: 120px;
left: 150px;
}
#d3{
display: block;
width: 40px;
height:40px;
position: absolute;
top: 120px;
left: 200px;
}
#d1:hover{
background: orange;
}
#d3:hover{
background: orange;
}
#d2:hover{
background: orange;
}
</style>
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
$("#d1").hover(function(){
$("#d1").click(function(){
alert("DIV1 Estoy clicado");
});
alert("DIV1 estoy arriba");
});
$("#d2").hover(function(){
$("#d2").click(function(){
alert("DIV2 Estoy clicado");
});
alert("DIV2 estoy arriba");
});
$("#d3").hover(function(){
$("#d3").click(function(){
alert("DIV3 Estoy clicado");
});
alert("DIV3 estoy arriba");
});
});
</script>
</head>
<body>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</body>
</html>
No, no es exactamente así, la idea es hacer una aplicación de las cuerdas de una guitarra y al pulsar cada botón cambie el color de la cuerda y el sonido sea diferente, pero todo esto teniendo las mismas cuerdas para los 3 botones,
Cargamos el documento y movemos el ratón por las cuerdas, y no pasa nada, no suena nada ni cambia nada, entonces pulsamos el botón E, y pasamos el ratón por cada una de las seis cuerdas, y cada una de estas emite un sonido diferente y solo suena y cambia de color al pasar el ratón sobre ellas y haber pulsado el botón E,
Pulsamos entonces el botón F, y al pasar el ratón por cada una de las mismas cuerdas el sonido cambia en cada una de ellas pero todos son distintos a los sonidos anteriores .
Al pulsar el botón G pasaría lo mismo, pasas el ratón sobre cada una de las cuerdas y cada sonido emitido por cada una de ellas es distinto a cada uno de los anterior.
Te paso el proyecto haber si lo ves más claro, lo que quiero saber es por que no me funciona el mouse over en la función function s6E()
[url=http://www26.zippyshare.com/v/B83DljdC/file.html]guitarra.rar[/url]
A ver si esto puede ayudarte en algo amigo neoarcangel. Cambie el evento click de cada submit, ( aunque te recomiendo mejor usar el input button ) ... por el evento keydown del formulario...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</script>
<!-- <link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>-->
<style>
.s{
background: white;
border: none;
}
.cuerda{
border: 1px solid yellow;
}
</style>
<script type="text/javascript">
var Epresionada = false;
var Fpresionada = false;
var Gpresionada = false;
var nota = "";
$(document).keydown(function(tecla){
if(tecla.keyCode==69){
Epresionada = true;
Fpresionada = false;
Gpresionada = false;
}else{
if(tecla.keyCode==70){
Epresionada = false;
Fpresionada = true;
Gpresionada = false;
}else{
if(tecla.keyCode==71){
Epresionada = false;
Fpresionada = false;
Gpresionada = true;
}else{
Epresionada = false;
Fpresionada = false;
Gpresionada = false;
}
}
}
if(Epresionada){ $("#E").css({"background-color":"black"}); }else{ $("#E").css({"background-color":"white"}); }
if(Fpresionada){ $("#F").css({"background-color":"black"}); }else{ $("#F").css({"background-color":"white"}); }
if(Gpresionada){ $("#G").css({"background-color":"black"}); }else{ $("#G").css({"background-color":"white"}); }
/*EVENTOS POR CUERDAS TOCADAS*/
$("#primera").mouseover(function() {
if(Gpresionada){
nota = "G";
}else{
if(Fpresionada){
nota = "F";
}else{
if(Epresionada){
nota = "E";
}
}
}
if(nota != ""){
alert("Nota "+nota+" esta activa y la cuerda primera fue tocada");
}
});
$("#primera").mouseout(function() {
Epresionada = false;
Fpresionada = false;
Gpresionada = false;
nota = "";
$("#E").css({"background-color":"white"});
$("#F").css({"background-color":"white"});
$("#G").css({"background-color":"white"});
});
$("#segunda").mouseover(function() {
if(Gpresionada){
nota = "G";
}else{
if(Fpresionada){
nota = "F";
}else{
if(Epresionada){
nota = "E";
}
}
}
if(nota != ""){
alert("Nota "+nota+" esta activa y la cuerda segunda fue tocada");
}
});
$("#segunda").mouseout(function() {
Epresionada = false;
Fpresionada = false;
Gpresionada = false;
nota = "";
$("#E").css({"background-color":"white"});
$("#F").css({"background-color":"white"});
$("#G").css({"background-color":"white"});
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/guitarra.css" />
<title>GUITARRA</title>
</head>
<body>
<form action="" method="post">
<input type="submit" class="s" id="E" value="E"/>
<input type="submit" class="s" id="F" value="F"/>
<input type="submit" class="s" 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">6</div>
<div class="espacio"></div>
<div class="cuerda" id="quinta">5</div>
<div class="espacio"></div>
<div class="cuerda" id="cuarta">4</div>
<div class="espacio"></div>
<div class="cuerda" id="tercera">3</div>
<div class="espacio"></div>
<div class="cuerda" id="segunda">2 </div>
<div class="espacio"></div>
<div class="cuerda" id="primera">1</div>
<div class="espacio"></div>
</div>
</body>
</html>
De nuevo neoarcangel, revisnado tu script según vi esta mal cerrada una llave
Espero esto solvente tu problema y si no... ya sabes que seguimos al pendiente
<script type="text/javascript">
$(document).ready(function asignarAelementos(){
$('#E').click(function acordeE(){
$('#sexta').mouseover(function s6E(){
//NO FUNCIONA AQUI
$('#sexta').css('background','url(img/string2.jpg)');
alert('DEBERIA MOSTRAR ESTO');
});
});
});
</script>
¡Gracias!
En cuanto a la adaptación del segundo código, es decir
<script type="text/javascript"> $(document).ready(function asignarAelementos(){ $('#E').click(function acordeE(){ $('#sexta').mouseover(function s6E(){ //NO FUNCIONA AQUI $('#sexta').css('background','url(img/string2.jpg)'); alert('DEBERIA MOSTRAR ESTO'); }); }); }); </script>Nada, sigue sin funcionar, pero me da que no es que haya problemas, pienso que la encadenacion de 3 funciones da problemas.
Con encadenamiento me refiero a esto
function primeraFuncion () { //seria un onclick function segundaFuncion funcion () {//seria un mouseover function terceraFuncion () { //lo que hace el mouseover } } }Luego me he fijado en el primer codigo que me has puesto y si, funciona a la perfeccion, y veo que no has sobrepasado encadenar mas de dos funciones, francamente no se me hubiese ocurrido hacerlo asi, los if no son mi fuerte.
Muy muy agradecido por la respuesta y por tu tiempo en ayudarme con el desarrollo, no todo el mundo es capaz de ayudar asi con el codigo de otra persona.
Un saludo
No hay de que, para eso estamos.. para ayudar en lo que podamos como podamos... me alegra haberte ayudado.
Seguiremos en contacto!
