如何將jquery選擇傳遞給函數？

我試過搜索，但無法完全找到我正在尋找的東西。希望這對某人來說非常簡單。如何將jquery選擇傳遞給函數？

這是我開始的代碼，我想變成一個函數。顯然有一種方法可以做到這一點，所以我不必重複。

var fullWidth = $('.full-img').width(); 
var paddBottom = fullWidth * .75; 
$('.full-img').css('padding-bottom', paddBottom); 

var thumbWidth = $('.img-box').width(); 
var thumbBottom = thumbWidth * .75; 
$('.img-box').css('padding-bottom', thumbBottom);

這裏就是我試圖

function aspectRatioFix(main, thumb) { 
    var fullWidth = main.width(); 
    var paddBottom = fullWidth * .75; 
    main.css('padding-bottom', paddBottom); 

    var thumbWidth = thumb.width(); 
    var thumbBottom = thumbWidth * .75; 
    thumb.css('padding-bottom', thumbBottom); 
} 

    aspectRatioFix('.full-img', '.img-box');

我得到的錯誤「遺漏的類型錯誤：main.width是不是一個函數」

是否有可能遍歷我的功能採取的方式照顧我的腳本的兩個部分，而不是重複我擁有的？謝謝！

來源

2017-04-07 Jacob J

您需要重新選擇還是可以將其存儲在內存中？或者說否則，你的圖片是否被動態添加到頁面中？無論如何，每個jQuery對象都有一個選擇器對象，直接傳遞它，或者重新獲取每個函數調用。 –

在我運行此功能之前，它們將被動態添加到加載頁面上。 –

aspectRatioFix期待的jQuery對象，所以你必須在jQuery的傳遞函數對象，而不是選擇器（串）是這樣的：

aspectRatioFix($('.full-img'), $('.img-box'));

如果你有許多圖像和他們的拇指和要應用爲所有的代碼，然後用.each這樣的：

var $mains = $('.full-img'), 
    $thumbs = $('.img-box'); 

$mains.each(function(index) { 
    // this: is the main image 
    // index: is its index so we can access the according thumb from $thumbs 

    aspectRatioFix($(this), $($thumbs[index])); // apply the aspectRatioFix on this main image, and on it's thumb from the $thumbs object (both this and $thumbs[index] are node elements so we have to wrap them in a jQuery object using $()) 
});

來源

2017-04-07 17:35:47

感謝這工作。我沒有很多圖片和他們的大拇指，只是通過使用所需的類來處理它們。 –

您發送純字符串，而不是選擇你的功能，你會做這樣的：

function aspectRatioFix(main, thumb) { 
    var fullWidth = main.width(); 
    var paddBottom = fullWidth * .75; 
    main.css('padding-bottom', paddBottom); 

    var thumbWidth = thumb.width(); 
    var thumbBottom = thumbWidth * .75; 
    thumb.css('padding-bottom', thumbBottom); 
} 

aspectRatioFix($('.full-img'), $('.img-box'));

來源

2017-04-07 17:38:34 Lixus

-1

function aspectRatioFix(main, thumb) { 
    var fullWidth = main.width(); 
    var paddBottom = fullWidth * .75; 
    main.css('padding-bottom', paddBottom); 
    var thumbWidth = thumb.width(); 
    var thumbBottom = thumbWidth * .75; 
    thumb.css('padding-bottom', thumbBottom); 
} 
aspectRatioFix($('.full-img'), $('.img-box'));

來源

2017-04-07 17:38:43

發佈答案時請使用正確的代碼樣式。 –

我可以建議簡單地緩存你的jQuery對象。一個IIFE其可以是拷貝內部的簡單DOM ready事件/粘貼到一個單獨的js文件：

// IIFE 
(function(scope, $){ 
    // this configuration 
    var cfg = { 
     cache: { 
      fullImg: '.full-img', 
      imgBox: '.img-box' 
     }, 
     options: { 
      modifier: 0.75, 
      css: 'padding-bottom' 
     } 
    }; 

    // function declaration 
    function aspectRatioFix(elements, options){ 
     $.each(elements, function(){ 
      var el = $(this), 
       paddBottom = el.width() * options.modifier; 
      el.css(options.css, paddBottom); 
     }); 
    } 

    // DOM ready to execute 
    $(function(){ 
     var fullImg = $(cfg.cache.fullImg); 
     //var imgBox = $(cfg.cache.imgBox); 

     aspectRatioFix(fullImg, cfg.options); 
     aspectRatioFix($(cfg.cache.imgBox), cfg.options); 
    }); 
}(window, window.jQuery));

我重構東西進入官能的（在這種情況下）和模塊化的方法的方式是每個字符串移動中的代碼到cfg對象文字。代碼變得更清晰分離。

並添加實時快速：aspectRatioFix($('.a-new-selector'), cfg.options); 如果接受的答案，您將不得不再次編輯該功能，而你應該避免這種情況。

來源

2017-04-07 18:01:28

如何將jquery選擇傳遞給函數？

回答

相關問題