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

I have written some jQuery functions, and recently realized I needed to reuse the code for another situation. I refactored the code to accept a selector as an arguement, so I can now use for case 1, and case 2. However, when I execute my functions in document.ready I get weird results.

我编写了一些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');
});

It should be noted, these selectors do no show up on the same page. Also, when I only run one instance of imageCalc() and setImageDims() These functions work just fine. Here are the functions in question..

应该注意，这些选择器不会出现在同一页面上。此外，当我只运行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; });    
}

In summary, all the code works just fine, when I only have each function called only ONCE in document.ready but I need to use this code for 2 scenarios, how can I do this?

总之，当我在document.ready中只有每个函数只调用ONCE时，所有代码都可以正常工作，但是我需要在2个场景中使用这个代码，我该怎么办呢？

2 个解决方案

#1

Add a var in front of your $imgWidth, $imgHeight, and $imgAspectRatio variables. Without the var, they're being declared at global scope, and therefore accidentally getting shared across both calls to that function.

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

UPDATE: I just noticed that the $imgAspectRatio is being used by both functions. Perhaps you can make that the return value from the first function, so it can be passed into the second function.

更新：我刚刚注意到两个函数正在使用$ imgAspectRatio。也许您可以从第一个函数中获取返回值，因此可以将其传递给第二个函数。

To elaborate... something like this should theoretically work, although I'm not able to test it since I don't have the corresponding HTML:

详细说明......这样的事情理论上应该可行，虽然我无法测试它，因为我没有相应的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);
});

#2

This will require you to re-work your functionsas setImageDims depends on $imgAspectRatio to be available globally.

这将要求您重新设置您的函数，因为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; });    
}

#1