Jquery插件：如何使用窗口调整大小？

寻找创建我的第一个Jquery插件。 基本上，在空白页上垂直居中放置一个div

    (function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var $heightDiv      = $this.height();
        var $heightWindow   = $(window).height();
        var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
        var applyMargin     = function() {
            $this.css('margin-top',$marginTop+'px');
            console.log($heightWindow);
        }
        $(window).resize(applyMargin);
        applyMargin();
        return $this;
    }; // fn.centerdiv
})(jQuery);

它可以工作，但不适用于“调整窗口大小”。找到了另一个答案（），但在

$

之后添加“window”并不能解决我的问题。我如何让这个插件也能与窗口大小调整一起工作？谢谢大家

编辑答案…

这里有两个问题

• 您正在将css应用于

  窗口

• 这部分代码位于

  return

  语句之后

替换

return this.each(function() {
     $(this).css('margin-top',$marginTop+'px');
}); // return
$(window).resize(function() {
     $(this).css('margin-top',$marginTop+'px');
});

与

把它放在返回语句之前。

这里有两个问题

• 您正在将css应用于

  窗口

• 这部分代码位于

  return

  语句之后

替换

return this.each(function() {
     $(this).css('margin-top',$marginTop+'px');
}); // return
$(window).resize(function() {
     $(this).css('margin-top',$marginTop+'px');
});

与

---

并将其放在

return

语句之前。

此

位于

窗口的上下文中。resize

事件处理程序指的是

窗口

。您应该存储对外部

this

的引用，以便在事件处理程序中使用它：

...
var $this = $(this);
    $(window).resize(function() {
        $this.css('margin-top',$marginTop+'px');
    });
...

---

您还需要将您的

返回

放在函数的末尾，它不执行后的所有内容。

此

放在

窗口的上下文中。调整大小

事件处理程序指的是

窗口

。您应该存储对外部

this

的引用，以便在事件处理程序中使用它：

...
var $this = $(this);
    $(window).resize(function() {
        $this.css('margin-top',$marginTop+'px');
    });
...

---

您还需要将您的

返回值

放在函数末尾，它不执行后的所有内容。

解决：我没有重新计算窗口高度。这是最终代码。你认为这对吗

(function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var calculateMargin = function() {
            var $heightDiv      = $this.height();
            var $heightWindow   = $(window).height();
            var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
            return $marginTop;  
        }
        return this.each(function() {
            var $marginTop = calculateMargin();
            $this.css('margin-top',$marginTop+'px');
            $(window).resize(function() {
                var $marginTop = calculateMargin();
                $this.css('margin-top',$marginTop+'px');
            });
        }); 
    }; // fn.centerdiv
})(jQuery);

---

解决方法：我并没有重新计算窗户的高度。这是最终代码。你认为这对吗

(function($){  
    $.fn.centerdiv = function(options) {  
        var defaults = {  
            ratio   :   2
        };
        var options = $.extend(defaults, options);
        // get some useful variables
        var $this           = $(this);
        var calculateMargin = function() {
            var $heightDiv      = $this.height();
            var $heightWindow   = $(window).height();
            var $marginTop      = Math.round(($heightWindow - $heightDiv)/options.ratio);
            return $marginTop;  
        }
        return this.each(function() {
            var $marginTop = calculateMargin();
            $this.css('margin-top',$marginTop+'px');
            $(window).resize(function() {
                var $marginTop = calculateMargin();
                $this.css('margin-top',$marginTop+'px');
            });
        }); 
    }; // fn.centerdiv
})(jQuery);

---

使用您的答案编辑代码，但不随窗口调整大小。我还犯了别的错误吗？非常感谢您用您的答案编辑了代码，但它不会随窗口调整大小。我还犯了别的错误吗？非常感谢你，你做的工作太多了。您正在将

$（this）

缓存为

$this

，它可以包含多个元素。然后绑定一个

窗口。为每个事件调整事件处理程序的大小，但在该事件处理程序中，您将CSS应用于
$this
对象中的所有元素。我要么在
.each（）
循环中创建
$this
变量，要么绑定到
窗口。只调整一次大小。另外，在使用jQuery的项目中，通常以
$
开头变量表示该变量是jQuery对象。谢谢您的反馈。我会学习的，所以你能写一些修改来改进这个微插件吗？谢谢你，你做的工作太多了。您正在将
$（this）
缓存为
$this
，它可以包含多个元素。然后绑定一个
窗口。为每个事件调整事件处理程序的大小，但在该事件处理程序中，您将CSS应用于
$this
对象中的所有元素。我要么在
.each（）
循环中创建
$this
变量，要么绑定到
窗口。只调整一次大小。另外，在使用jQuery的项目中，通常以
$
开头变量表示该变量是jQuery对象。谢谢您的反馈。我会学习的，所以你能写一些修改来改进这个微插件吗？非常感谢。