一个使用.each的小jquery函数

我认为我在这方面很聪明。我做了一个小功能，可以放大或缩小图像，以适应浏览器窗口中的边距。有一张照片效果很好。然后我想用几个图像来做，这样我就可以在同一个窗口中点击这些图像。我试着用了。每一个，但都没有成功。它仅根据第一幅图像的尺寸放大每个图像。显然，我希望每个图像都能根据其自身的尺寸放大

js位：

$(window).bind("load resize", function(){

    var ww = $(window).width();
    var wh = $(window).height();
    wh = wh-50;
    ww = ww-225;
    var wr = (ww/wh);

    $("#slides div.scale img").each(function(){
        var ow = $("img").width();
        var oh = $("img").height();
        var or = (ow/oh);
        if (wr<or) {
            $("img").css('width',ww);
            $("img").css('height','auto');
        }
        else {
            $("img").css('height',wh);
            $("img").css('width','auto');
        };
    });
});

$（窗口）.bind（“加载调整大小”，函数（）{
var ww=$（window.width（）；
var wh=$（window.height（）；
wh=wh-50；
ww=ww-225；
var-wr=（ww/wh）；
$（“#幻灯片分区比例img”）。每个（函数（）{
var ow=$（“img”）.width（）；
var oh=$（“img”）.height（）；
var或=（ow/oh）；
如果（wr在each中，则需要使用
$（this）
而不是
$（“img”）

我已经为您做了一些更改，以及一些效率调整（不过都未经测试）

$（函数（）
{
$（窗口）.bind（'load resize'，function（）
{
var$win=$（此），
ww=$win.width（）-50，
wh=$win.height（）-225，
wr=（ww/wh）；
$（“#幻灯片分区比例img”）。每个（函数（）
{
var$img=$（此），
ow=$img.width（），
oh=$img.height（），
或=（ow/oh），
dimStyles；
if（wr
每个循环中的选择器不会依次获取每个图像，而是页面上所有img标记的数组

在每个循环中，每次引用图像时，请使用$（this）来表示当前是循环主题的一个特定图像

例如：

通过使用$（“img”）选择器，您仍然可以选择页面上的所有img标记。
您应该使用$（这个）引用正在处理的当前项。
btw…或者可能不是变量的最佳名称。@Joseph我同意Joseph的观点。虽然它不是保留关键字之一，但它不是最佳的变量名称，尤其是当来自其他背景的人必须维护或使用您的代码时。@Jim您能在jsbin或JSFIDLE上放一个演示吗？下面是一个示例实况演示，加上一个指向zip的链接。@Jim aHA！发现了问题…显示：无。这会将所有隐藏元素的宽度设置为0，从而导致错误缩放。请改用可见性：隐藏和可见性：可见。抱歉，JAAulde。这似乎对任何图像都不起作用。为什么是dimStyles？您当前遇到的错误是什么？我编辑了几个ti我把语法搞糟了——如果你愿意的话，试一下现在有什么。哈哈，
dimStyles
只是我说“维度样式”的捷径：）只要你明白在each.Yep.using$（this）中使用
this
，你用不用代码都没什么大不了的这显然是正确的做法。学童错误！但您建议的代码似乎完全可以缩放我的图像。我在这里放了一个小演示：以及一个下载文件的链接，如果您喜欢的话：。谢谢您的帮助：）您的标记有一些问题，正如我所说，我的语法未经测试——它是供您参考的，以了解我如何提高效率——因此，我的基本答案仍然适合您的原始问题。下面是一个更新版本，似乎正在运行：
<div id="slides">
    <div class="slide 1 scale"><img src="portrait.jpg" /></div>
    <div class="slide 2 scale"><img src="landscape.jpg" /></div>
    <div class="slide 3 scale"><img src="square.jpg" /></div>
    <div class="slide 4 scale"><img src="portrait.jpg" /></div>
</div>

$( function()
{
    $( window ).bind( 'load resize', function()
    {
        var $win = $( this ),
            ww = $win.width() - 50,
            wh = $win.height() - 225,
            wr = ( ww / wh );

        $( '#slides div.scale img' ).each( function()
        {
            var $img = $( this ),
                ow = $img.width(),
                oh = $img.height(),
                or = ( ow / oh ),
                dimStyles;

            if( wr < or )
            {
                dimStyles = {
                    width: ww,
                    height: 'auto'
                };
            }
            else {
                dimStyles = {
                    width: 'auto',
                    height: wh
                };
            }

            $img.css( dimStyles );
        } );
    } );
} );

$("#slides div.scale img").each(function(){
    var ow = $(this).width();
    var oh = $(this).height();
    var or = (ow/oh);
    if (wr<or) {
        $(this).css('width',ww);
        $(this).css('height','auto');
    }
    else {
        $(this).css('height',wh);
        $(this).css('width','auto');
    };
});

function changeimage(){
    $("#slides div").css("visibility","hidden");
    $('#slidetitles span').hide();
    $("#slides div."+ns).css("visibility","visible");
    $("#slidetitles span."+ns).show();
    cs = ns;
};

$(this).css('height');