[SOLUCIONADO] Cambiar attr con jQuery

gustavocaso · #1 (**permalink**) 05/07/2013, 04:10

Se que la pregunta es de principiante, y la verdad no se porque esto no sale, pero tengo una imagen que al clickear encima llama a una función de jQuery que lo único que hace es cambiar el src de dicha imagen.
Os dejo mi código por si alguien puede arrojarme algo de claridad.
Gracias.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mesas</title>
</head>
<body>
<img id="mesa1" src="img/seats_blue.png" alt="mesa" onClick="reservar()"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>

function reservar(){

$(this).attr('src', 'img/seats_red.png');
}

</script>
</body>
</html>

madman_18 · #2 (**permalink**) 05/07/2013, 04:32

El problema que veo es que usar $(this)..sin embargo no esta llegandole nada a la función. Haz la prueba cambiando $(this) por $('#mesa1').

A ver si así te funciona o te da algún tipo de error

Trublux · #3 (**permalink**) 05/07/2013, 05:08

Quita el onClick y pon esto:

Código Javascript:

Ver original$(function(){
    $('#mesa1').click(function(event){
        $(this).attr('src', 'img/seats_red.png');
    });
});

De esta forma capturas el evento "click" del elemento que tiene el id "mesa1" (la imagen) y le cambias el src.

gustavocaso · #4 (**permalink**) 05/07/2013, 05:43

Gracias de esta forma funciona pero esto solo era una prueba y el realidad voy a utilizar muchas más mesas por eso no queria utilizar directamente el selector de id sino pasarselo por this para solo tener que crear una función.
Es que el tema de this o $(this) me confunde bastante.
Gracias.

gustavocaso · #5 (**permalink**) 05/07/2013, 07:14

Ya lo solucione, tenia que pasarme el objecto jQuery para poder acceder a la propiedad .attr() de jQuery.
Aqui esta el código.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mesas</title>
</head>
<body>
<img id="mesa1" src="img/seats_blue.png" alt="mesa" onClick="reservar($(this))"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>

function reservar(img){

img.attr('src', 'img/seats_red.png');

}

</script>
</body>
</html>

jarios · #6 (**permalink**) 05/07/2013, 11:39

Yo lo entiendo asi:

El problema vienen del contexto donde se ejecuta la funcion. Cuando se ejecuta reservar(), al pinchar en la imagen, dentro de la funcion "this" tienen como valor [object Window] es decir la ventana. Un truco que he encontrado es pasarle a la funcion el contexto:

Código HTML:

Ver original<img id="mesa1" src="icon.png" alt="mesa" onClick="myFunction(this)"/>

Con esto ya podemos usar javascript sin tener que usar jquery:

Código Javascript:

Ver originalfunction myFunction(item){
    var variable = item;
 variable.setAttribute('src','icon2.png');
}

Imagino que jQuery lo que hace es pasar el contexto a la funcion y por eso se puede usar $(this).

He puesto un ejemplo aqui: [URL="http://jsfiddle.net/UJd3U/"]http://jsfiddle.net/UJd3U/[/URL]

Saludos.

jarios · #7 (**permalink**) 05/07/2013, 11:46

Ojo que en el ejemplo anterior no cambio el contexto. Solo le paso la etiqueta que ejecuta la funcion que es "this".

Creo que habia una forma con "call" de ejecutar las funciones dentro de un contexto.

Saludos.

jarios · #8 (**permalink**) 05/07/2013, 12:06

Tambien podrias usar addEventListener para registrar las funciones y asi se pasa el contexto directamente:

Código Javascript:

Ver originalfunction myFunction(){
    var variable = this;
 variable.setAttribute('src','icon2.png');
}
 
document.getElementById('mesa1').addEventListener('click',myFunction,false);

En la etiqueta:

Código HTML:

Ver original<img id="mesa1" src="icon.png" alt="mesa"/>

Ahora si que me he quedado contento :)

Saludos.