Javascript 如何将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');

我得到错误“UncaughtTypeError:main.width不是函数”

有没有一种方法可以循环使用我的函数来处理脚本的两个部分，而不是复制我的脚本？

---

谢谢

函数

aspectRatioFix

需要jQuery对象，因此必须传入jQuery对象，而不是选择器（字符串），如下所示：

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

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 $())
});

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'));

如果您有许多图像和它们的拇指，并且希望为所有图像应用代码，请使用

。每个
，如下所示：

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

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 $())
});

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'));

函数
aspectRatioFix
需要jQuery对象，因此必须传入jQuery对象，而不是选择器（字符串），如下所示：

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

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 $())
});

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'));

如果您有许多图像和它们的拇指，并且希望为所有图像应用代码，请使用
。每个
，如下所示：

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

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 $())
});

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'));

如果向函数发送的是纯字符串而不是选择器，则必须按如下方式执行：

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

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 $())
});

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'));

如果向函数发送的是纯字符串而不是选择器，则必须按如下方式执行：

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

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 $())
});

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'));

我建议只缓存jQuery对象。
可复制/粘贴到单独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
objectliteral。代码变得更加清晰，便于分离

快速添加real:
aspectRatioFix（$（'.a-new-selector'），cfg.options）
如果答案被接受，您必须再次编辑该函数，而您应该避免这样做。
我的建议是只缓存jQuery对象。
可复制/粘贴到单独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
objectliteral。代码变得更加清晰，便于分离

快速添加real:
aspectRatioFix（$（'.a-new-selector'），cfg.options）
如果答案被接受，您必须再次编辑该函数，同时应避免编辑。
您需要重新选择还是可以将其存储在内存中？或者说，您的图像是否动态添加到页面？在任何情况下，每个jQuery对象上都有一个选择器对象，可以直接传入，也可以重新提取每个函数调用。在我运行此函数之前，它们将在加载时动态添加到页面中。您需要重新选择还是可以将其存储在内存中？或者说，您的图像是否动态添加到页面？在任何情况下，每个jQuery对象上都有一个selector对象，直接传递它，或者重新蚀刻每个函数调用。在我运行此函数之前，它们将在加载时动态添加到页面中。谢谢，这一切都很有效。我没有太多的图片和它们的拇指，只是通过使用它能处理它们的类。谢谢，这很有效。我没有太多的图片和它们的大拇指，只是通过使用它处理它们的类。请在发布答案时使用正确的代码样式。请在发布答案时使用正确的代码样式。