Question

我在页面上有几个div，我正在尝试使用jQuery为它们添加类。但是jQuery只检查第一个背景图像的比例，并将相同的类添加到所有div中。

如何检查所有背景图像的比例？

段：

$(document).ready(function () {
    var image_url = $('.class1').css('background-image'),
        image;

    // Remove url() or in case of Chrome url("")
    image_url = image_url.match(/^url\("?(.+?)"?\)$/);

    if (image_url[1]) {
        image_url = image_url[1];
        image = new Image();

        // just in case it is not already loaded
        $.each(image).load(function () {
            //   alert(image.width + 'x' + image.height);
            var ratio = image.width / image.height;

            if (ratio > 1) {
                $(".class1").addClass("added_1");
            } else if (ratio < 1) {
                $(".class1").addClass("added_2");
            }
        });

        image.src = image_url;

    };
})

Answer 1

使用jquery的width()和height()方法。

试试这个

 $.each(image, function () {
        var ratio = $(this).width()/$(this).height();

        if (ratio > 1) {
          $(".class1").addClass("added_1");
        }
        else if (ratio < 1) {
          $(".class1").addClass("added_2");
        }
   });

  image.src = image_url;

Answer 2

将所有内容放在$('.class1').each(function(){});

中

$(document).ready(function(){
    $('.class1').each(function(){
        var checkClass = $(this);
        var image_url = checkClass.css('background-image'),
        image;

        // Remove url() or in case of Chrome url("")
        image_url = image_url.match(/^url\("?(.+?)"?\)$/);

        if (image_url[1]) {
            image_url = image_url[1];
            image = new Image();

            // just in case it is not already loaded
                $.each(image).load(function () {
                //   alert(image.width + 'x' + image.height);
                var ratio = image.width/image.height;

                if (ratio > 1) {
                  checkClass.addClass("added_1");
                }
                else if (ratio < 1) {
                  checkClass.addClass("added_2");
                }
            });

        image.src = image_url;

        }
    });
});

jquery只检查页面上的一个图像比例

2 个答案: