jQuery自定义函数

Question

为什么oldHeight的值没有被覆盖？它仍然有80的oldHeight，而不是我作为参数传递的东西。即使我传递了参数newHeight，它也不会覆盖它。但根据documentation的说法，它会自动更新。代码如下：

( function($) {
$.fn.bad = function(callback) {
    var options;
    var settings = $.extend({
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    return this.each( function() {
        var that$ = $(this);
        that$.bind("mouseenter", function() {
            $(this).animate({ "height" : settings.newHeight+"px" });
        }).bind("mouseleave", function() {
            $(this).animate({ "height" : settings.oldHeight+"px" });
        });
    });
}
})(jQuery);
$(".box").bad({"oldHeight":"400"});

这个===> Fiddle

Answer 1

您使用var options;将"options“初始化为null，并使用空值扩展您的设置。

( function($) {
    $.fn.bad = function(options) {
            var settings = $.extend({
                "oldHeight":"80",
                "newHeight":"200"
            }, options);

    ...

这是可行的。

Answer 2

试试这个，

var settings = {};
var settings = $.extend(settings, {
    "oldHeight":"80",
    "newHeight":"200"
}, options);

您的函数需要接受options，而不是callback (如果没有使用回调)。

所以你的代码将是，

(function($) {
$.fn.bad = function(options) {
    var settings = {};
    var settings = $.extend(settings, {
        "oldHeight":"80",
        "newHeight":"200"
    }, options);
    ...

Test