Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Cambiar attr con jQuery

Estas en el tema de Cambiar attr con jQuery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/07/2013, 04:10
 
Fecha de Ingreso: julio-2013
Ubicación: Madrid
Mensajes: 13
Antigüedad: 6 años, 3 meses
Puntos: 0
Cambiar attr con jQuery

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>
  #2 (permalink)  
Antiguo 05/07/2013, 04:32
Avatar de madman_18  
Fecha de Ingreso: agosto-2010
Mensajes: 792
Antigüedad: 9 años, 2 meses
Puntos: 14
Respuesta: Cambiar attr con jQuery

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
__________________
"Si consigues ser algo más que un hombre, si te entregas a un ideal, te convertes en algo muy diferente"
  #3 (permalink)  
Antiguo 05/07/2013, 05:08
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 9 años
Puntos: 48
Mejor sin javascript intrusivo

Quita el onClick y pon esto:
Código Javascript:
Ver original
  1. $(function(){
  2.     $('#mesa1').click(function(event){
  3.         $(this).attr('src', 'img/seats_red.png');
  4.     });
  5. });
De esta forma capturas el evento "click" del elemento que tiene el id "mesa1" (la imagen) y le cambias el src.
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #4 (permalink)  
Antiguo 05/07/2013, 05:43
 
Fecha de Ingreso: julio-2013
Ubicación: Madrid
Mensajes: 13
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Cambiar attr con jQuery

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.
  #5 (permalink)  
Antiguo 05/07/2013, 07:14
 
Fecha de Ingreso: julio-2013
Ubicación: Madrid
Mensajes: 13
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Cambiar attr con jQuery

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>
  #6 (permalink)  
Antiguo 05/07/2013, 11:39
 
Fecha de Ingreso: mayo-2011
Ubicación: Zaragoza
Mensajes: 58
Antigüedad: 8 años, 5 meses
Puntos: 5
Respuesta: Cambiar attr con jQuery

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
  1. <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 original
  1. function myFunction(item){
  2.     var variable = item;
  3.  variable.setAttribute('src','icon2.png');
  4. }

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.
  #7 (permalink)  
Antiguo 05/07/2013, 11:46
 
Fecha de Ingreso: mayo-2011
Ubicación: Zaragoza
Mensajes: 58
Antigüedad: 8 años, 5 meses
Puntos: 5
Respuesta: Cambiar attr con jQuery

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.
  #8 (permalink)  
Antiguo 05/07/2013, 12:06
 
Fecha de Ingreso: mayo-2011
Ubicación: Zaragoza
Mensajes: 58
Antigüedad: 8 años, 5 meses
Puntos: 5
Respuesta: Cambiar attr con jQuery

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

Código Javascript:
Ver original
  1. function myFunction(){
  2.     var variable = this;
  3.  variable.setAttribute('src','icon2.png');
  4. }
  5.  
  6. document.getElementById('mesa1').addEventListener('click',myFunction,false);

En la etiqueta:

Código HTML:
Ver original
  1. <img id="mesa1" src="icon.png" alt="mesa"/>

Ahora si que me he quedado contento :)

Saludos.

Etiquetas: ajax, attr, html, javascript, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:26.