具有擴展功能的jQuery插件不會占用用戶參數

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 :)）： 小提琴

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);
        ...