将两个不同的参数传递给函数

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只调用一次函数，但我需要使用此代码为2分的情况，我该怎么做这个？

Answer 1

在您的$imgWidth，$imgHeight和$imgAspectRatio变量前添加一个var。如果没有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; });  
}