jquery - 错误 jquery 元素 DOM

Question

  var foto = 'htp://midomain.com/folder/pic.jpg';
  var img = new Image();
  $(img).attr({'src': foto, 'width':'100', 'height': '100'})
        .load(function(){
          $(this).hide();                                   
          $(this).fadeIn('slow');
    })
    .click(function(){
      var ancho = 0;
      var img2 = new Image();
      $(img2)
       .attr('src', $(this).attr('src'))
       .load(function(){
            $(this).hide();                                 
            $(this).fadeIn('slow');
            ancho = $(this).width();
            $(img2).attr({'width': $(this).width(), 'height': $(this).height()});
       });

$('body').appendTo(img);

console.log(ancho); //0
console.log($(img2).attr('width')); //undefined
//get width img2 :(

alguien puede obtener el valor de 宽度和高度

有人可以帮助我，我需要获取元素 img2 的宽度

编辑：我需要图片的原始宽度谢谢

Answer 1

  var ancho = 0;
  var img2 = new Image();
  $(img2)
   .attr('src', $(this).attr('src'))
   .load(function(){
        $(this).hide();                                 
        $(this).fadeIn('slow');
        ancho = $(this).width();
        $(img2).attr({'width': $(this).width(), 'height': $(this).height()});
   });

在此代码块之前添加：

$(那个) = $(这个)

然后像这样使用 $(that) ：

$(img2) .attr('src', $(that).attr('src') ...等

问题是，当您为 $(img2) 调用链式函数时，$(this) 的范围现在指的是 img2，而不是 img1。

Answer 2

您有一个范围问题，并且您绑定加载事件和设置属性的顺序存在一个小问题。

var foto = 'https://www.toontrack.com/getdbimage.asp?myproducts=7';
var img = new Image();
$(img).load(function() {
    $(this).hide();
    $(this).fadeIn('slow')
}).attr({
    'src': foto,
    'width': '100',
    'height': '100'
}).click(function() {
    var ancho = 0;
    var img2 = new Image();
    $(img2).load(function() {
        ancho = this.width;
        console.log(ancho);
    }).attr('src', $(this).attr('src'));
}).hide();
$('body').append(img);​

演示：http: //jsfiddle.net/9yw5H/

此外，您可以使用 html5 将其缩短为：

var foto = 'https://www.toontrack.com/getdbimage.asp?myproducts=7';
var img = new Image();
$(img).load(function() {
    $(this).hide();
    $(this).fadeIn('slow')
}).attr({
    'src': foto,
    'width': '100',
    'height': '100'
}).click(function() {
    var ancho = this.naturalWidth;
    console.log(ancho);
}).hide();
$('body').append(img);​

演示：http: //jsfiddle.net/9yw5H/1/