javascript - 无法在回调时配置选项(jQuery 插件)

Question

我正在尝试创建一个可自定义的 minHeight 选项。

默认情况下，minHeight 变量应等于对象高度，但如果用户决定更改它，他们可以在回调时使用正常的插件配置选项。

以下是我的尝试:

(function($) {
   $.fn.ezToggle = function(options) {

       var defaults = {

       }, 
       options = $.extend(defaults, options);

       return this.each(function() {

           defaults.minHeight = $(this).outerHeight();
           $(this).height(defaults.minHeight);

           alert(defaults.minHeight);

        });

    };
}) (jQuery);

$(function() {
    $('.foo').ezToggle({
        minHeight : 50 // Height does not change
    });
});

查看 jsFiddle 的简单示例:http://jsfiddle.net/hCLwx/8/

Answer 1

更新我刚刚意识到您正在将元素设置为当前高度，这似乎没有多大意义，但是我不能 100% 确定您的意图，所以我仅更新了最后两个示例，以便仅在设置了 minHeight 选项的情况下设置高度。

另一个更新 好的，我想我明白了，您还希望将该选项设置为当前高度，以防用户未设置该选项。我再次更新了示例。

检查是否设置了该选项，如果是这样，则在元素高度上使用它。您可以简单地使用 || 运算符:

return this.each(function() {

    options.minHeight = options.minHeight || $(this).outerHeight();
    $(this).height(options.minHeight);

    alert(options.minHeight);

});

minHeight 将包含 minHeight 选项值(如果已设置)，而不是 0，否则为元素高度。如果您还想接受 0 作为 minHeight，那么您可以例如针对 undefined 进行测试:

return this.each(function() {

    if(options.minHeight === undefined)
    {
        options.minHeight = $(this).outerHeight();
    }

    $(this).height(options.minHeight);

    alert(options.minHeight);

});

或者作为第三个选项，为 minHeight 选项设置默认值 null 并对其进行测试:

var defaults = {
    minHeight: null            
}, 
options = $.extend(defaults, options);

return this.each(function() {

    if(options.minHeight === null)
    {
        options.minHeight = $(this).outerHeight();
    }

    $(this).height(options.minHeight);

    alert(options.minHeight);

});