2

你好，

我正在尝试根据每个图像的比例（风景/肖像/正方形）为每个图像添加类。此代码适用于 JSfiddle，但不适用于网站（本地或服务器）：

$(document).ready(function()
{
    $('img').addClass('wide');
    $.each($('img'), function()
    {
        var image = $(this);

        if (image.height() > image.width()) {
            image.removeClass('wide');
            image.addClass('tall');
        } else if (image.height == image.width()) {
            image.removeClass('wide');
            image.addClass('square');
        }
    });
});​

这是我的 JSfiddle：http: //jsfiddle.net/LYxv6/。

4

6 回答 6

5

您的代码在 jsfiddle 上运行的原因是该站点（默认情况下）将您的代码包装在onload处理程序中。一旦加载了所有图像，就会调用此处理程序，这与$(document).ready()仅等待 DOM 结构完成不同。

如果您利用addClass采用函数参数而不是字符串的版本，则更改类的函数是微不足道的：

$(window).on('load', function() {
    $('img').addClass(function() {
        if (this.height === this.width) {
            return 'square';
        } else if (this.height > this.width) {
            return 'tall';
        } else {
            return 'wide';
        }
    });
});

在回调this中是<img>元素本身，您可以直接访问它的.width和.height属性，而无需使用 jQuery。

这应该比在.each()循环中重复调用 jQuery 函数更有效。

于 2012-09-04T08:11:37.190 回答
1

你应该运行这个脚本

$(window).load()

...否则（准备就绪）可能会发生图像尚未加载并且在您访问它们时大小仍然未知的情况。

您还在这里忘记了一些括号：

else if (image.height == image.width()) {

应该

else if (image.height() == image.width()) {
于 2012-09-04T08:04:25.870 回答
1

更改为 $('img').each 并在 image.height() 处缺少括号（这是一个函数）

$(window).load(function() {

$('img').addClass('wide');

$('img').each(function() {
    var image = $(this);

    if (image.height() > image.width()) {
        image.removeClass('wide');
        image.addClass('tall');
    }
    else if (image.height() == image.width()) {
        image.removeClass('wide');
        image.addClass('square');
    }

});

});
于 2012-09-04T08:09:08.997 回答
0

尝试在if else if语句中使用变量：

这是jsFiddle。

    var biggerVal = image.height() > image.width();
    var equalVal = image.height() == image.width();

    if ( biggerVal ) {
        image.removeClass('wide');
        image.addClass('tall');
    } else if ( equalVal ) {
        image.removeClass('wide');
        image.addClass('square');
    }

这个问题也有同样的问题：How to build simple sticky navigation with jQuery?

于 2012-09-04T07:59:23.610 回答
0

在本地系统的服务器上，创建一个 .html 文件。

将其更改为文档加载，为其中一个宽度部分添加缺少的大括号 - 并确保 .html 文件如下所示：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title></title>
    <script>
       $(document).load(function() {

    $('img').addClass('wide');

    $.each($('img'), function() {
        var image = $(this);

        if (image.height() > image.width()) {
            image.removeClass('wide');
            image.addClass('tall');
        }
        else if (image.height() == image.width()) {
            image.removeClass('wide');
            image.addClass('square');
        }

    });

});​
    </script>
    <style>
    img{
height:250px;
}
.wide{
border:10px solid #aed;

}
.tall{
border:10px dashed #dea;

}
.square{
border:10px dotted #ade;

}​
    </style>
    </head>
    <body>
    <img src="http://24.media.tumblr.com/tumblr_m9t0dwyu0P1qjfsubo1_500.jpg"/>
    <img src="http://24.media.tumblr.com/tumblr_m9iqv8oQl01qcpwsso1_500.jpg "/>
    <img src="http://25.media.tumblr.com/tumblr_m9n4kyf8aA1r1thfzo5_1280.jpg"/>  
    </body>
    </html>
​

您可以将<style></style>and<script></script>替换为<link rel="stylesheet" type="text/css" href="yourstyle.css"/>and<script type ="text/javascript" src="jquerywhatever.js"></script><script type ="text/javascript" src="YOURSCRIPT.js"></script>

于 2012-09-04T08:07:41.397 回答
0

我会做这样的事情：

(function ($) {
    $.fn.proportions = function (options) {
        options = $.extend(options, {
            wideClass : 'wide',
            tallClass : 'tall',
            squareClass : 'square'
        });
        addProportions = function () {
            img = $(this);
            var ratio = img.width() / img.height();
            if (ratio > 1) {
                return img.addClass(options.wideClass);
            }
            if (ratio === 1) {
                return img.addClass(options.squareClass);
            }
            return img.addClass(options.tallClass);
        };
        return this.each(function () {
            if ($(this).width() !== undefined) {
                addProportions.call(this);
            } else {
                $(this).on('load', addProportions);
            }
        });
    };
}(jQuery));

jQuery(function ($) {
    jQuery('img').proportions();
});​

将其放入插件中使其可重用。而不是像 jsfiddle 那样使用 window.load ，而是将该函数附加到每个图像的加载事件中，以便立即添加该类。

于 2012-09-04T08:09:50.823 回答