无法在回调时配置选项(jQuery插件）

Not able to config option on call back (jQuery Plugin)

本文关键字：jQuery 插件 选项 配置 回调      更新时间：2023-09-26

我正在尝试创建一个可自定义的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/

Update我刚刚意识到您正在将元素设置为当前高度，这似乎没有多大意义，但我不能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);
});
相关文章：