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

我已经写了一些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分的情况，我该怎么做这个？

来源

2014-10-09 Chris

你能否加入演示显示那些“奇怪的结果”？ – Oriol 2014-10-09 19:32:37

你在哪里声明变量$ imgWidth，$ imgHeight和$ imgAspectRatio？你能给出完整的代码示例吗？ – 2014-10-09 19:33:29

在您的$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); 
});

来源

2014-10-09 19:32:51

Troy Gizzi，我把小提琴放在了一起，http://jsfiddle.net/aauodyby/ – Chris 2014-10-09 19:58:03

上面的提琴是为了说明如何计算方位比例仍然不似乎 – Chris 2014-10-09 20:03:25

不错！我在草地上看到狗狗。它似乎与原来的比例相同（http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg）。什么是计算错误？ – 2014-10-09 20:06:01

这将要求您重新工作您的功能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; });  
}

来源

2014-10-09 19:37:48

Tristan Lee，我已经添加了一个小提琴来说明纵横比如何似乎仍然不计算http://jsfiddle.net/aauodyby/ – Chris 2014-10-09 20:02:29

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

回答

相关问题