Javascript jQuery插件，带有extend'；不接受用户参数

我正在编写一个jQuery插件，使超链接的容器（例如div）可以点击

我希望用户能够更改一些基本参数

但是，我一定是做错了什么，因为它总是使用默认参数，而不是用户定义的参数

我试着否决光标

这个

守则：

(function($){
 $.fn.clickablecontainer = function() {
    return this.each(function(options) {

        var defaults = {  
            cursor: 'pointer',
            hoverclass: 'hover',
            activeclass: 'active'
            //ellipsisText: "..."  
        };  
        var options = $.extend(defaults, options);          
        var elem = $(this);
        elem.css('cursor', options.cursor);
        $('a', elem).css('cursor', options.cursor);        

        elem.hover(function() {
            elem.addClass(options.hoverclass);
        }, function() {
            elem.removeClass(options.hoverclass);
        });

        elem.mousedown(function() {
            elem.addClass(options.activeclass);
        });

        $('body').mouseup(function() {
            elem.removeClass(options.activeclass);
        });        

        elem.click(function() {            
            var target = $('a', elem).attr('target');
            var href = $('a', elem).attr('href');            
            switch(target) {
                case '':
                case '_self':                    
                    location.href = href;
                    break;
                case '_blank':
                    window.open(href);
                    break;
                case '_parent':
                    parent.location.href = href;
                    break;
                case '_top':
                    top.location.href = href;
                    break;
                default:
                    alert('frame');
                    top.frames[target].location = href;
            }
        });
    });
 };
})(jQuery);

$('document').ready(function() {
    $('.container div').clickablecontainer({
        cursor: 'help'
    });
});

成品（特别感谢tvanfosson:）：

---

您有两个选项定义，因为您使用

var

重新声明它。我怀疑这会导致右侧的选项成为空对象。最好只使用：

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

这将保持默认值不变，但允许选项中的值覆盖它们，然后重新指定给原始选项变量

您还需要将选项的定义移到外部函数，否则实际上不会得到任何值

$.fn.clickablecontainer = function(options) {
    var defaults = {  
        cursor: 'pointer',
        hoverclass: 'hover',
        activeclass: 'active'
        //ellipsisText: "..."  
    };  
    options = $.extend({},defaults, options);  

    return this.each(function() {
        var elem = $(this);
        ...

---

由于使用

var

重新声明选项，因此有两种选项定义。我怀疑这会导致右侧的选项成为空对象。最好只使用：

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

这将保持默认值不变，但允许选项中的值覆盖它们，然后重新指定给原始选项变量

您还需要将选项的定义移到外部函数，否则实际上不会得到任何值

$.fn.clickablecontainer = function(options) {
    var defaults = {  
        cursor: 'pointer',
        hoverclass: 'hover',
        activeclass: 'active'
        //ellipsisText: "..."  
    };  
    options = $.extend({},defaults, options);  

    return this.each(function() {
        var elem = $(this);
        ...

---

两件事：1。这难道不会使期权成为全球性的吗？（如果可能的话，我想出于明显的原因防止这种情况发生）和2。它仍然不起作用：当我考虑它时，P-EDIT-1不是这样，因为它已经被声明为正确的？@PeeHaa-yesp，因为它是一个函数参数，它已经是函数的本地参数了。@tvanfosson谢谢你。至于#2，有什么办法解释为什么它仍然不起作用吗？（更新的fiddle:）@Peehaa-ah，options参数和扩展需要在外部函数中，而不是在内部：两件事：1。这难道不会使期权成为全球性的吗？（如果可能的话，我想出于明显的原因防止这种情况发生）和2。它仍然不起作用：当我考虑它时，P-EDIT-1不是这样，因为它已经被声明为正确的？@PeeHaa-yesp，因为它是一个函数参数，它已经是函数的本地参数了。@tvanfosson谢谢你。至于#2，有什么办法解释为什么它仍然不起作用吗？（更新的fiddle:）@Peehaa-ahh，选项参数和扩展需要在外部函数中，而不是内部函数中：