將兩個不同的參數傳遞給函數

我已經寫了一些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

將兩個不同的參數傳遞給函數

回答

相關問題