将 jquery 函数作为变量参数传递给自定义函数答案

【问题标题】：Passing jquery function as variable parameter to the custom function将 jquery 函数作为变量参数传递给自定义函数
【发布时间】：2014-08-18 17:19:23
【问题描述】：

我正在编写一个计算最大高度/宽度并使元素具有相同高度/宽度的函数。我想向这个函数传递 2 个参数：

1. The selector, which can be(element, class )
2. jQuery `width()` / `height()` function

并且期望的结果应该是看起来像..的函数。

Eg 1. equalDimensions('.class', width() ); OR
Eg 2. equalDimensions( div, height() );

根据传递给函数width()/height()的内容，它将计算最大高度/宽度，并使作为第一个参数传递的所有选择器等于宽度/高度。

作为 jQuery 新手，我正在努力将其放入代码中。

这是我迄今为止尝试过的......

var equalDimension = function(  selector,  fn ){
    var dimension = fn();
    var biggestDimemsion = 0;
    $(selector).each(function(){
        if($(this).dimension > biggestDimemsion){
            biggestDimemsion = $(this).dimension;
        }
    });
    $(selector).each(function(){
        $(this).dimension(biggestDimemsion);
    });
};

【问题讨论】：

目前我正在使用两个单独的自定义函数来获得相等的高度和宽度，只需将选择器作为参数传递，它工作正常，但只创建一个函数并传递宽度/高度函数作为第二个参数。

标签： jquery function height width argument-passing

【解决方案1】：

我写了一个简单的例子来说明我将如何解决这个问题：

http://jsfiddle.net/3NRah/

var equalDimension = function (selector, fn) {
    var $elements = $(selector),
        dimensions = $elements.map(function (i) {
            return $elements.eq(i)[fn]();
        }),
        maxDimension = Math.max.apply(Math, dimensions);
    $elements[fn](maxDimension);
};

equalDimension('div', 'height');

这假定您传递的是 jQuery 函数的名称，而不是函数本身。如果你想传递实际的函数，它看起来像这样：

http://jsfiddle.net/3NRah/1/

var equalDimension = function (selector, fn) {
    var $elements = $(selector),
        dimensions = $elements.map(function (i) {
            return fn.call($elements.eq(i));
        }),
        maxDimension = Math.max.apply(Math, dimensions);
    fn.call($elements, maxDimension);
};

equalDimension('div', $.fn.height);

编辑：就为此创建一个干净的 UI 而言，我很可能会在以下 JSBin 中添加它。

http://jsbin.com/pogujozane/edit?js,output

$.fn.equalDimension = function (fn) {
    var $elements = $(this),
        dimensions = $elements.map(function (i) {
            return $elements.eq(i)[fn]();
        }),
        maxDimension = Math.max.apply(Math, dimensions);
    $elements[fn](maxDimension);
};
$.fn.equalHeight = function () {
  return $(this).equalDimension('height');
};
$.fn.equalWidth = function () {
  return $(this).equalDimension('width');
}

所以它可以被称为：

$('div').equalHeight();

【讨论】：

比我（现在已删除）的答案干净得多。
太棒了。您的两种解决方案都很完美。谢谢罗伯特。只是想从jQuery的角度知道哪个是更好的方法，使用字符串或函数作为参数以及为什么（如果你能解释原因）
我不确定一个是否比另一个更好-但我确实认为使用第二种解决方案您得到的错误会更加明显-它只需要您知道 jQuery 在哪里功能现场。
我添加了一个更简洁的解决方案，更接近我的处理方式。

【解决方案2】：

你真的应该传递一个 sting 而不是一个函数，然后像这样做一些事情：

var equalDimension = function(  selector,  fn ){
    var dimension = fn === 'width' ? 'width' : 'height'; //Prevent from runing any other jQuery functions
    var biggestDimemsion = 0;
    $(selector).each(function(){
        if($(this)[dimension]() > biggestDimemsion){
            biggestDimemsion = $(this).dimension;
        }
    });
    $(selector).each(function(){
        $(this)[dimension](biggestDimemsion);
    });
};

equalDimension('selector', 'width');

旁注，第二个可以忽略：

var equalDimension = function(  selector,  fn ){
    var dimension = fn === 'width' ? 'width' : 'height'; //Prevent from runing any other jQuery functions
    var biggestDimemsion = 0;
    $(selector).each(function(){
        if($(this)[dimension]() > biggestDimemsion){
            biggestDimemsion = $(this).dimension;
        }
    });
    $(selector)[dimension](biggestDimemsion);
};

【讨论】：