使用jQuery统一更改同一类图像的宽度？

Question

我有多个具有相同类属性的图像,我想统一调整所有图像的大小,即使它们都有不同的原始宽度 - 我怎么能用jQuery做到这一点？

<img id=img1 class="ResizeMe" src="img1.gif" width="100" height="100" /><br />

<img id=img2 class="ResizeMe" src="img2.gif" width="200" height="200" /><br />

<img id=img3 class="ResizeMe" src="img3.gif" width="150" height="150" /><br />

<input id="Button1" type="button" value="Shrink Images by 10%" />
<input id="Button2" type="button" value="Grow Images by 10%" />

TIA!

更新:这是我用于未来任何人的最终工作代码......

        function OnClientValueChanging(sender, args) 
        {
            var zoomPercentage = args.get_newValue() / 100;

            $(".ApplyZoomEffect").each(function () {
                var newWidth = parseFloat($(this).attr('OriginalWidth')) * zoomPercentage;
                var newHeight = parseFloat($(this).attr('OriginalHeight')) * zoomPercentage;
                $(this).css('width', newWidth + "px").css('height', newHeight + "px");
            });
        }

Answer 1

试试这种风格:

$("#Button1").click(function() {
  $(".ResizeMe").width(function(i, w) { return w * 0.9 })
                .height(function(i, h) { return h * 0.9 });
});

$("#Button2").click(function() {
  $(".ResizeMe").width(function(i, w) { return w * 1.1 })
                .height(function(i, h) { return h * 1.1 });
});

从jQuery 1.4.1开始,你可以将一个函数传递给.width()和.height()来更干净地完成它.