Question

我有一个功能可以做一些事情，它做的一件事就是计算高度/宽度并将css应用于顶部/左边以进行居中。我不想多次重写公式，而是希望能够重用它并通过它传递参数。

我有：

loading.css({
    top: (wrapper.height() - loading.outerHeight()) / 2 + 'px',
    left: (wrapper.width() - loading.outerWidth()) / 2 + 'px'
});

我希望能够重复使用这两个公式，并将loading替换为其他注册元素。

我不知道我在做什么，而且我尝试了几件失败的事情......

我希望能够通过类似loading._center();

的方式来调用它

当函数运行时，它会附加加载div并使用上面的代码计算顶部和左侧的绝对定位。我希望它在窗口调整大小时保持居中，所以我基本上复制了上面的代码并用$(window).resize函数包装它。

当显示错误div时，由于高度/宽度尺寸不同，我用相似的代码再次计算顶部和左边。我没有复制element.css({top: [...], left: [...]})，而是想做类似的事情......

_center = function() {
    var context = $(this);
    context.css({
        top: (wrapper.height() - context.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - context.outerWidth()) / 2 + 'px'
    });
};

loading._center();

我很亲密。我忘了回复计算..我现在有：

_center = function($this) {
    $this.css({
        top: (wrapper.height() - $this.outerHeight()) / 2 + 'px',
        left: (wrapper.width() - $this.outerWidth()) / 2 + 'px'
    });
};

_center(loading);

Answer 1

你可以为第二个参数提供一个函数：

loading.css('top', function(index, oldValue) {
  return (wrapper.height() - $(this).outerHeight()) / 2 + 'px';
});

loading.css('left', function(index, oldValue) {
  return (wrapper.width() - $(this).outerWidth()) / 2 + 'px';
});

这是.css（）的documentation。

Answer 2

您可以将其注册为jQuery插件：

$.fn._center = function(wrapper) {
    return this.each(function() {
        $(this).css({
            top: ($(wrapper).height() - $(this).outerHeight()) / 2 + 'px',
            left: ($(wrapper).width() - $(this).outerWidth()) / 2 + 'px'    
        });
    });
};

并将其称为：

var wrapper = $("#someDiv");
$(".foo, .bar")._center(wrapper);

请参阅authoring jQuery plugins.

编写一个jquery函数来重用一个公式

2 个答案: