Question

例如，有没有办法可行？

function resizer() {
    $(".rezimg").each(sizing($(".rezimg")))
    }
function sizing(im) {
    im.css({"width": "auto", "height": "auto"});
    var imight = im.height();
    var imidth = im.width();
    var idth = im.parent().width();
    var ight = im.parent().height();
    var aspecti = (imight/imidth);
    var aspectc = (ight/idth);
    if (aspectc>aspecti){
        im.css({"width": idth+"px", "height": "auto"})
    }
    else if(aspectc<aspecti){
        im.css({"height": ight+"px", "width": "auto"});
    }
    else if(aspectc==aspecti){
        im.css({"width": idth+"px", "height": ight+"px"});
    }
}

我希望我的意图在这里很明确。 sizing（）是一个函数，它将图像的高度与容器进行比较并相应地拟合。我希望在我的代码中的不同点使用它。感谢。

Answer 1

是的，但它需要一些改变。以下应该有效：

function resizer() {
    // notice that sizing is not a function call, but a reference
    $(".rezimg").each(sizing)
}

// should also be possible to call it directly on an element
function sizing(im) {
    // jQuery each sets the first argument to a number, otherwise it's an element
    var im = (typeof im === 'number') ? $(this) : im;

    im.css({"width": "auto", "height": "auto"});
    var imight = im.height();
    var imidth = im.width();
    var idth = im.parent().width();
    var ight = im.parent().height();
    var aspecti = (imight/imidth);
    var aspectc = (ight/idth);
    if (aspectc>aspecti){
        im.css({"width": idth+"px", "height": "auto"})
    }
    else if(aspectc<aspecti){
        im.css({"height": ight+"px", "width": "auto"});
    }
    else if(aspectc==aspecti){
        im.css({"width": idth+"px", "height": ight+"px"});
    }
}

Answer 2

您可以指定大小调整作为函数参数。参数将是this，这是由“.rezimg”表示的dom元素。 See the docs了解更多信息。

function resizer() {
   $(".rezimg").each(sizing)
}

function sizing(el) {
    var im = $(el);
    im.css({"width": "auto", "height": "auto"});
    // ...
}

Answer 3

你写的是什么：

$(".rezimg").each(sizing($(".rezimg")))

使用sizing()参数直接执行函数$(".rezimg")。但是each将不会执行它，因为each需要一个函数作为参数而sizing($(".rezimg"))不是一个函数（它实际上是undefined sizing()没有任何回报）。

你必须说each需要执行什么功能，以及使用什么参数。你可以用：

来做到这一点

$(".rezimg").each(sizing.pass($(".rezimg")))

当sizing.pass($(".rezimg"))返回带有所需参数的预格式化函数时。

Answer 4

当然，有几种方法。您可以调用大小调整并更改大小调整的参数以接受索引和图像元素，如下所示。

function resizer() {
    $(".rezimg").each(sizing); 
}
function sizing(index, img) {
    im.css({"width": "auto", "height": "auto"});
    var imight = im.height();
    var imidth = im.width();
    var idth = im.parent().width();
    var ight = im.parent().height();
    var aspecti = (imight/imidth);
    var aspectc = (ight/idth);
    if (aspectc>aspecti){
        im.css({"width": idth+"px", "height": "auto"})
    }
    else if(aspectc<aspecti){
        im.css({"height": ight+"px", "width": "auto"});
    }
    else if(aspectc==aspecti){
        im.css({"width": idth+"px", "height": ight+"px"});
    }
}

或者您可以在大小调整函数中使用$(this)引用当前元素进行迭代，即

 function resizer() {
    $(".rezimg").each(sizing)
}

function sizing() {
    var im = $(this);
    im.css({"width": "auto", "height": "auto"});
    var imight = im.height();
    var imidth = im.width();
    var idth = im.parent().width();
    var ight = im.parent().height();
    var aspecti = (imight/imidth);
    var aspectc = (ight/idth);
    if (aspectc>aspecti){
        im.css({"width": idth+"px", "height": "auto"})
    }
    else if(aspectc<aspecti){
        im.css({"height": ight+"px", "width": "auto"});
    }
    else if(aspectc==aspecti){
        im.css({"width": idth+"px", "height": ight+"px"});
    }
}

非常简单的希望：.each（）可以使用已定义的函数吗？

4 个答案: