jQuery: Problemas con uso de variable

[Legoltaz]

Hola a tod@s, hoy he empezado con jQuery, y ya me ha surgido esta duda: ¿cómo puedo utilizar una variable JavaScript (ej: var myvar = 50;) en jQuery?

Código JavaScript:

var trueWidth = this.width;
var trueHeight = this.height;
$(this).animate({width:trueWidth,height:trueHeight},"slow");
 

Necesito asignarle al width y height del animate las variables trueWidth y trueHeight respectivamente, pero no me funciona del modo que ahí muestro. ¿Algún consejo? (repito que hoy mismo he empezado con jQuery y estoy totalmente verde ).

Otra pregunta: ¿Cómo puedo acceder a las propiedades de un objeto en jQuery? (ej: $("#elemento").width)?

[Legoltaz]

Ahora la duda es otra :

Tengo este código:

Código JavaScript:

$(document).ready(function(){
    imgs = document.getElementsByTagName("img");
    $.each(imgs,function(i,n){
        w = n.width;
    });
    $("img").css({width:80,height:80});
    $("img").click(function(){
        alert(w);
    });
});
 

¿Por qué en el alert(w) no me dice el valor del width inicial de la imagen clickeada (me devuelve el valor del width de la segunda imagen)? Ese es mi actual y gran problema y espero que podáis ayudarme :(.

Es decir:

Tengo 2 imagenes:

Width original 1ª img: 460
Width original 2ª img: 135
Width final 1ª img: 80
Width final 2ª img: 80

Solo me devuelve 135.

Quiero obtener el valor del width/height original de cada imagen, luego reducir los width/height a 80, y finalmente usar el width/height original que está almacenado en una variable, cuyo valor no me devuelve correctamente (solo me devuelve 135). Estoy desesperado xd

[eall]

el problema es que lo que tu quieres hacer está fuera del each.

Código javascript:

$(document).ready(function(){
    imgs = document.getElementsByTagName("img");
    $.each(imgs,function(i,n){
        w = n.width; // w queda con el último valor.
    });
    $("img").css({width:80,height:80});
    $("img").click(function(){
        alert(w);
    });
});
 
$('img').click(function(){
   var h = $(this).attr('width');
   var w = $(this).attr('height');
   $(this).animate({width:w,height:h},"slow");
});
 

espero te ayude con tu problema...

[Legoltaz]

Iniciado por eall

el problema es que lo que tu quieres hacer está fuera del each.

Código javascript:

$(document).ready(function(){
    imgs = document.getElementsByTagName("img");
    $.each(imgs,function(i,n){
        w = n.width; // w queda con el último valor.
    });
    $("img").css({width:80,height:80});
    $("img").click(function(){
        alert(w);
    });
});
 
$('img').click(function(){
   var h = $(this).attr('width');
   var w = $(this).attr('height');
   $(this).animate({width:w,height:h},"slow");
});
 

espero te ayude con tu problema...

Gracias por la respuesta, pero aún no está bien. Ahora al hacer click no hace nada, porque creo que se le está asignando de nuevo 80px de width height con h y w.

Estaba probando con esto, pero solo me funciona con la última imagen (le asigna a todas las imagenes los valores width y height de la ultima):

Código JavaScript:

$(document).ready(function(){
    $("img").each(function(){
        w = $(this).width();
        h = $(this).height();
    });
    $("img").css({width:80,height:80});
    $("img").click(function(){
        $(this).animate({width:w,height:h},"slow");
    });
});
 

[eall]

Ya entendí lo que quieres hacer.

Guarda en un atributo las dimensiones originales y cuando le hagas clic las rescatas y las cambias.

Código javascript:

$(document).ready(function(){
    $("img").each(function(){
        w = $(this).width();
        h = $(this).height();
        $(this).attr("dim", w + ":" + h);
        $(this).css({width:80,height:80});
    });
    //$("img").css({width:80,height:80});
    $("img").click(function(){
        var d = $(this).attr("dim").split(":");
        $(this).animate({width:d[0],height:d[1]},"slow");
    });
});
 

pruebalo y me dices como te fue.

[Legoltaz]

Iniciado por eall

Ya entendí lo que quieres hacer.

Guarda en un atributo las dimensiones originales y cuando le hagas clic las rescatas y las cambias.

Código javascript:

$(document).ready(function(){
    $("img").each(function(){
        w = $(this).width();
        h = $(this).height();
        $(this).attr("dim", w + ":" + h);
        $(this).css({width:80,height:80});
    });
    //$("img").css({width:80,height:80});
    $("img").click(function(){
        var d = $(this).attr("dim").split(":");
        $(this).animate({width:d[0],height:d[1]},"slow");
    });
});
 

pruebalo y me dices como te fue.

No sé por qué, pero sigue sin funcionar, ahora ni siquiera reduce el width y heigth de las imágenes a 80.

[Legoltaz]

¡Solucionado!

Al final el código queda así:

Código JavaScript:

$(document).ready(function(){
    $("img").each(function(n){
        w = $(this).width();
        h = $(this).height();
        $(this).attr("dims",w+","+h);
    });
    $("img").css({width:80,height:80});
    $("img").click(function(){
        d = $(this).attr("dims").split(",");
        $(this).animate({width:d[0],height:d[1]},"slow");
    });
});
 

Muchas gracias por tu ayuda, eall.