javascript - 带扩展的 jQuery 插件不接受用户参数

Question

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

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

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

我尝试否决光标。

fiddle .

代码:

(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 :) ): fiddle

Answer 1

您有两个选项定义，因为您使用 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);
        ...