变量未定义，（JQuery 插件开发）

Question

我正在创建我的第一个基于 jQuery 的插件，但我遇到了一个问题。

我在尝试 console.log 时收到一条错误消息，指出 var minHeight 未定义。

(function ($) {
    $.fn.something = function (options) {
        var defaults = {
            selector: '.selector',
            minHeight: defaults.selector.height(),
            speed: 200
        }
        console.log(defaults.minHeight);
    };
})(jQuery);

Answer 1

确实很难理解您要达到的目标，但是您当前尝试的方式存在一些问题。您试图在定义对象本身 (defaults) 之前设置对象的属性 (defaults.selector)。

为了完成它，最简单的方法是将minHeight 的定义拉到另一行。另外你可能想看看 jQuery 的 $.extend:

(function ($) {
    $.fn.something = function (options) {
       var defaults = {
            selector: '.selector',
            speed: 200
       }
       defaults.minHeight = $(defaults.selector).height();
       console.log(defaults.minHeight);

       // extend() will set the values of 'options' that are empty with default's
       var options = $.extend({}, defaults, options);
       // options.minHeight will be the height of '.selector' if no options are
       // given, or 'minHeight' if one is given as parameter
       console.log(options.minHeight);
    };
})(jQuery);

// testing code so you get what I mean
$().something({minHeight: 10});
$().something();

见the code above in action（打开控制台）。