Question

我有一些jquery代码，用于根据宽度设置div高度。 JSFiddle example here

一切都按原样运行，但我想要的是一个可重用的函数，这样我就不会为每个唯一的id创建完全相同的函数。该代码目前仅适用于#bigHug div，但我希望能够在$('#biggerHug').setHeight(1.8)和.ready函数中执行.resize之类的操作并设置高度提供的身份。

我试图通过在$(this).width()函数中放置$('#bigHug').width()而不是setHeight来尝试解决方案，但所有内容都“破了”。 div不会显示加载或窗口大小调整。我认为这与$(this)引用$(window).ready而不是$('#bigHug').setHeight(1.8)有关。

思想？

Answer 1

试试这个：

function setHeight(ratio, elem ) {
    $elem = $(elem);
    var divWidth = $elem.width();
    var divHeight = divWidth / ratio;
    $elem.height(divHeight);
}


$(window).ready(function() {
    setHeight(1.8, '#bigHug');
});

$(window).resize(function() {
    setHeight(1.8, '#bigHug');
});

<强> DEMO

Answer 2

你可以像这样创建一个jquery“plugin”。 这是一个简单的例子。

(function($){
    $.fn.setHeight = function(val){
        return this.each(function(){
            // do calculations here and assign height ...
            $(this).height(val);
        });
    }
})(jQuery);

然后你可以像这样调用它：$('#mydiv').setHeight(1.8)它当然适用于任何jquery选择器。

Jquery可重用代码

2 个答案: