Question

我正在尝试缩放宽度大于100的图像。我正在使用下面的代码，但它会缩放甚至低于100px的图像......我做错了什么？

if($(".image-attach-body")) {
    if($(".image-attach-body a")) {
    $(".image-attach-body a").each(function() {
                var width = $("span span img").width();

                if(width > 100) {
                    $("span span img").cjObjectScaler({
                            destObj: $(".image-attach-body"),
                                method: "fit",
                });
                }
    }); 
    }
}

Answer 1

如果您的所有图片都低于100，那么您的代码就可以正常运行。这是有问题的代码行......

$("span span img").cjObjectScaler

此选择器位于每个循环内。因此，如果只有一个图像大于100，则可以对所有图像调用此函数。函数调用适用于与选择器匹配的每个元素（这就是jQuery的工作原理）。

我不知道您的标记是什么样的，所以我无法告诉您要将代码更改为什么。在每个循环中，您可能需要在选择器中的某个位置使用this，以使其更具体并与给定的上下文相关。

我猜它需要改成这个......

$("span span img", this).cjObjectScaler

编辑：您还需要更改代码行，以获得图像的宽度，因为它始终只返回找到的第一个图像的宽度。我建议将其存储在本地变量中，以便以后在应用“scaler”时不必重新查询它

Answer 2

主要问题是，您没有确定搜索范围，因此您的最终$('span span img')正在查找页面中的所有img。这是一个修复了一些其他问题的函数。请问是否没有意义：

if( $(".image-attach-body").length ) {
    $(".image-attach-body a").each(function() {
        var $img = $("span span img", this),
            width = $img.width();

        if(width > 100) {
            $img.cjObjectScaler({
                destObj: $img.closest(".image-attach-body"),
                method: "fit",
            });
        }
    }); 
}

注意：您的第一个if语句将始终返回true，因为如果找不到任何内容，它将返回一个空的jQuery对象，而不是null期望。因此将其更改为.length会验证是否至少找到1.第二个if语句（我删除了）是不必要的，因为如果没有each循环，则0循环将运行{{1}}次对象匹配，所以测试被浪费了......并且与第一个问题有同样的问题，因为它总会运行。

Answer 3

尝试将整个内容包装在$(document).load( );中，图片可能还没有。

$(document).load( function () {
 if($(".image-attach-body")) {
        $(".image-attach-body a").each(function() {
         var img = $("span span img",this);

         if(img.width() > 100) {
           img.cjObjectScaler({
             destObj: $(".image-attach-body"),
             method: "fit"
           });
         }
       });

 }

}）;

Answer 4

我认为你的width（）函数总是评估你的第一张图片。试试这个：

if($(".image-attach-body")) {
    if($(".image-attach-body a")) {
    $(".image-attach-body a").each(function() {
    var width = $("span span img",$(this)).width();

Answer 5

选择器有几个问题，宽度命令只返回选择器中第一个元素的宽度。

事实上，我建议你将代码更改为：

$(".image-attach-body a").each(function() {
    var images = $("span span img").filter(function() {
        return this.width > 100;
    });

    images.cjObjectScaler({
        destObj: $(".image-attach-body"),
        method: "fit"
    });
});

Answer 6

看到我不知道cjObjectScaler函数来自哪里，我做了这个更改（基于你的代码...）

if($(".image-attach-body")) {
    if($(".image-attach-body a")) {
    $(".image-attach-body a").each(function() {
                var $img = $("span span img", this);
                var width = $img.width();

                if(width > 100) {
                    img.attr("width", "100"); //Obviously, you'll replace it with your cjObjectScaler function here....
                });
                }
    }); 
    }
}

Answer 7

$("span span img")选择整个页面中的图像，而不是相对于当前范围。

另外，在使用each之前，您不必测试jQuery。这个方法对空jQuery什么都不做，所以你的代码可以简化为：

// For each attach body in document
$(".image-attach-body").each(function(attachBody)
{
    // For each image in the attach body
    $("a span span img", attachBody).each(function() 
    {
        // If image is too large
        if( $(this).width() > 100 )
        {
            // Scale to attach body
            $(this).cjObjectScaler({
                destObj: $(attachBody),
                method: "fit",
            });
        }
    });
});

jquery帮助if语句

7 个答案: