Question

我编写了一些jQuery函数，最近意识到我需要在另一种情况下重用代码。我重构了接受选择器作为争论的代码，所以我现在可以用于案例1和案例2.但是，当我在document.ready中执行我的函数时，我得到了奇怪的结果。

$( document ).ready(function() {
    imageCalc('.com-background > img');
    setImageDims('.com-background > img', '#main-content');
    imageCalc('.blog-entry-content iframe');
    setImageDims('.blog-entry-content iframe', '#content');
});

应该注意，这些选择器不会出现在同一页面上。此外，当我只运行imageCalc()和setImageDims()的一个实例时，这些函数运行正常。以下是有问题的函数..

function imageCalc(selector) {
    var obj=$(selector);
    $imgWidth = obj.width();
    $imgHeight = obj.height();
    $imgAspectRatio =  $imgHeight / $imgWidth;
    // $(selector).css('margin-left', function( calcMargin ) { return parseInt($('.main-content').css('padding')) * -1 + "px"; }); fix for ie
    obj.css('margin-left', '-10px' );

}
function setImageDims(selector, content_area) {
    var container = $(content_area);
    $(selector).css('height', function() { return $imgAspectRatio * container.width(); });
    $(selector).css('width', function() { return container.width() + 20; });    
}

总之，所有代码都运行得很好，当我在document.ready中只有每个函数只调用ONCE但是我需要在2个场景中使用这个代码时，我该怎么做？

Answer 1

在var，$imgWidth和$imgHeight变量前添加$imgAspectRatio。如果没有var，它们将被声明为全局范围，因此意外地在两次调用该函数时共享。

更新：我刚注意到两个函数正在使用$imgAspectRatio。也许你可以把它作为第一个函数的返回值，所以它可以传递给第二个函数。

详细说明......这样的事情在理论上应该可行，但由于我没有相应的HTML，我无法测试它：

function imageCalc(selector) {
    var obj=$(selector);
    var $imgWidth = obj.width();
    var $imgHeight = obj.height();
    var $imgAspectRatio =  $imgHeight / $imgWidth;
    // $(selector).css('margin-left', function( calcMargin ) { return parseInt($('.main-content').css('padding')) * -1 + "px"; }); fix for ie
    obj.css('margin-left', '-10px' );
    return $imgAspectRatio;
}
function setImageDims(selector, content_area, $imgAspectRatio) {
    var container = $(content_area);
    $(selector).css('height', function() { return $imgAspectRatio * container.width(); });
    $(selector).css('width', function() { return container.width() + 20; });    
}

$( document ).ready(function() {
    var ratio1 = imageCalc('.com-background > img');
    setImageDims('.com-background > img', '#main-content', ratio1);
    var ratio2 = imageCalc('.blog-entry-content iframe');
    setImageDims('.blog-entry-content iframe', '#content', ratio2);
});

Answer 2

这将要求您重新运作您的职能，setImageDims取决于$imgAspectRatio全球可用。

function imageCalc(selector) {
    var obj=$(selector),
        $imgWidth = obj.width(),
        $imgHeight = obj.height(),
        $imgAspectRatio =  $imgHeight / $imgWidth;
    // $(selector).css('margin-left', function( calcMargin ) { return parseInt($('.main-content').css('padding')) * -1 + "px"; }); fix for ie
    obj.css('margin-left', '-10px' );

    return $imgAspectRatio;
}

function setImageDims(selector, content_area) {
    var container = $(content_area);
    $(selector).css('height', function() { return imageCalc(selector) * container.width(); });
    $(selector).css('width', function() { return container.width() + 20; });    
}

传递两个不同的参数来运作

2 个答案: