JavaScript - Parametros en un evento

   
Vista:

Parametros en un evento

Publicado por Nicolas (7 intervenciones) el 23/04/2016 16:45:33
Hola gente, tengo un nuevo problema, sigo con JS, JQuery, HTML y CSS.
Tengo 9 botones, que utilizan una función exactamente igual, el unico variante es al INPUT que debo apuntar cada vez que ejecuto la function.
Tengo un "TATETI" en el cual cada botón mostrara una imagen de fondo en el mismo, pero el problema es el siguiente:
1
2
3
function colocarImagen(){
$("#img11").attr("class", "mostrarCirculo");
}
En esa función la unica variante es el INPUT al cual le asigno el atributo.
Tal como lo dije, 9 botones apuntan a esa funcion, por lo que en vez de "#img11", ahi deberia de haber un parámetro (de la funcion colocarImagen), para que sea general a los 9 botones, y no tenga que copiar y pegar 9 veces la misma funcion para que el programa funcione.
Este es el codigo de mi JS
---------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(load);
function load(){
    $("#img11").click(colocarImagen);
    $("#img12").click(colocarImagen);
    $("#img13").click(colocarImagen);
 
    $("#img21").click(colocarImagen);
    $("#img22").click(colocarImagen);
    $("#img23").click(colocarImagen);
 
    $("#img31").click(colocarImagen);
    $("#img32").click(colocarImagen);
    $("#img33").click(colocarImagen);
}
function colocarImagen(){
$("#img11").attr("class", "mostrarCirculo");
}
-----------------------------------------------
Yo intente hacer lo siguiente, pero no funciona:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function load(){
    $("#img11").click(colocarImagen("#img11"));
    $("#img12").click(colocarImagen);
    $("#img13").click(colocarImagen);
 
    $("#img21").click(colocarImagen);
    $("#img22").click(colocarImagen);
    $("#img23").click(colocarImagen);
 
    $("#img31").click(colocarImagen);
    $("#img32").click(colocarImagen);
    $("#img33").click(colocarImagen);
}
function colocarImagen(nom){
$(nom).attr("class", "mostrarCirculo");
}
----------------
// Obviamente, las demas lineas del load, con ese parametro pasado, como en la primer linea, no lo hice con el resto porque es mas que nada para ejemplificar.
Si hago exactamente lo anterior, al iniciar la pag el botón img11, aparece sin que yo le haga click, con la imagen.
Gracias, saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jordi

Parametros en un evento

Publicado por Jordi (75 intervenciones) el 24/04/2016 08:19:51
Hola Nicolás,

Prueba usando "this".

1
2
3
function colocarImagen(){
        $(this).attr("class", "mostrarCirculo");
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Parametros en un evento

Publicado por Nicolas (7 intervenciones) el 28/04/2016 22:30:27
Hola, gracias por responder, no pude aplicar esa solución porque me quedaba poco tiempo para entregar la tarea, pero justamente en este momento tengo que resolver lo mismo que pregunte antes aunque con un poco mas de dificultad.
Tengo una botonera con botones que tienen de value: Ejercicio 1 hasta el Ejercicio 19.
El objetivo es que yo pueda mediante cada uno de esos botones ejecutar un html dentro de otro, logrando mostrar cada uno de los ejercicios, y por consiguiente armando una especie de "portal" a todos los ejercicios del practico.
Pego el código y lo explico:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(load);
function load(){
    generarBotonera(); //genera una tabla html de forma dinamica
    for (contador=0; contador<=19; contador++){ //vinculo todos esos botones que estan dentro de la tabla
         $("#"+contador).click(accederEjercicio);
    }
}
function generarBotonera(){
//Genera una botonera que muestra un boton por linea(vertical) y estando a la izquierda de la pag
    var body;
    body = "<TABLE border=0 id=\"tablaBotonera\">";
    for(contador=1; contador<=19; contador++){
        body+= "<TR>" +
               "<TD>"+
               "<INPUT type=\"button\" value=\"Ejercicio" + contador + "\" id=\"" + contador + "\" class=\"botonesMenu\""+
               "</TD>"+
               "</TR>";
    }
    body += "</TABLE>";
    body += "<DIV>"+
            "<IFRAME id=\"entornoEjercicios\"></IFRAME>"+
            "</DIV>";
    document.body.innerHTML = body;
}
function accederEjercicio(){
//La duda esta aca
}
Si ya alguien leyó todo el código y llego hasta acá, se agradece primero que nada, y si me ayudan mas aún.
La cuestión es que no quiero hacer 19 funciones iguales porque es demasiado redundante.
Entonces necesito saber cual es el nombre del botón en el que el usuario hizo click, para llegar a una condicional que diga cual va a ser el archivo que se va a ejecutar en el IFRAME, por medio del atributo src (creo que era src, pero en todo caso lo averiguo, es un problema menor).
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar