Question

我正在编写一个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 :)）： 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);
        ...

带有extend的jQuery插件不会占用用户参数

1 个答案: