Javascript:如何更改多个 block 的图像大小？

Question

我需要更改几个dinamic block 的背景图片大小:

<div class="preview" style="background:url(http://site/image1.jpg)"></div>
<div class="preview" style="background:url(http://site/image2.jpg)"></div>
<div class="preview" style="background:url(http://site/image3.jpg)"></div>

这是我尝试设置背景大小的一种方式:

$('div.preview').each(function(){
    var x = y = 98;

    ths = $(this);
    var img = new Image();
    img.src = $(this).css('background-image').slice(4, -1);

    img.onload = function(e){
         if (this.width > this.height)
         {
             var scale = 100 * 98 / this.width;

             if (scale < 100)
             {
                 ths.css('background-size', 'auto ' + (100 - scale + 2) + '%');
             }
         }
         else
         {
             var scale = 100 * 98 / this.height;

             if (scale < 100)
             {
                 ths.css('background-size', (100 - scale + 4) + '% auto');
             }
         }
    }
});

但在这种情况下，图像大小仅针对 image3.jpg 发生变化。如何改变别人？

Answer 1

问题是 ths 不是局部变量。

因此，对于由 .each 处理的每个元素，相同的全局属性 (window.this)被重新分配。上次分配时，它指的是“image3”——因此所有后来发生的异步 onload 事件都将指代“image3”。

最快的解决方法是添加 var 并将代码更改为:

var ths = $(this);

这使得 ths 成为局部变量，对于 .each 处理的每个元素，该变量将不同(因为每个元素都在一个新函数作用域)，即 绑定(bind)在由 onload 回调形成的闭包中。

这是一个working fiddle (谢谢，阿尼!)