2011-10-22 56 views
2

我有一個jQuery插件,它遵循docs.jQuery.com的插件/創作示例,並且我無法弄清楚如何爲插件的每個元素保留唯一的設置應用於。頁面上有兩個元素,每個元素都分別應用於它們。基於插件/創作插件的jQuery作用域設置

這是到目前爲止我的代碼:

(function($) { 

/* Default settings */ 
var defaults = { 
    id: null, 
    properties: null, 
    container: '.comp-settings', /* override for .retail or .distressed */ 
    priceLabel: '.comp-section-header span', 
    slide: slideCallback, 
    minRange: 100000 
}; 

/* Some public here: $.compSlider('method', options) */ 
var methods = { 
    init: function(options) { 

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

     return this.each(function() { 
      $(this).slider(settings); 
     }); 

    } 
} 

/* Some methods here */ 
function opt(name) { 
    return settings[ name ]; 
} 

/* Plugin namespace */ 
$.fn.compSlider = function(method) { 
    // Method calling logic 
    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else if (typeof method === 'string') { 
     return this.slider(method, Array.prototype.slice.call(arguments, 1)); 
    } 
}; 

})(jQuery) 

問題:

  1. 的設置變量是不是在插件功能
  2. 如果我存儲在$變量的設置(此訪問).data('settings')我仍然無法從'opt'函數訪問$(this).data('settings'),因爲「this」不是元素(我相信它是DOM窗口)。

任何幫助表示讚賞。

回答

1

您無法訪問compSlider函數中的設置,因爲在您的示例中,它們在init()中定義,使它們成爲該函數的本地。如果您將範圍內的聲明向上移動:

$.fn.compSlider = function(method, options) { 
    var settings = $.extend({}, defaults, options); 
}; 

然後,您可以在那裏訪問它。或者只是在compSlider中定義它(var settings;),然後在init()中刪除var就足夠了。

更新:

在repsonse您的意見,是的,對不起,忘了問題#2。實際上,您將無法訪問每個插件對象的設置,因爲您無法在範圍內「下移」。換句話說,你不能從該函數之外訪問函數的局部變量。這就是compSlider函數的本地設置(如果您使用我建議的結構),它們的範圍就您的opt()函數而言較低。

當然,您可以隨時擴大範圍。爲了達到這個目的,你可以在插件的全局空間中設置一個變量來存儲對所有創建對象的引用。

var compSliderObjects = []; 

$.fn.compSlider = function(method, options) { 
    //store objects in compSliderObjects 
}; 

然而,這僅僅是一個想法,你仍然需要弄清楚要如何訪問compSliderObjects和拉正確的設置。每個對象都有唯一的ID嗎?如果是這樣,一組對象({id: 2, settings: data})。如果沒有,你需要弄清楚你想如何唯一地識別它們並將它們從數組中拉出來。

另外,你是否真的需要全球訪問它們?調用對象並獲取設置的工作和代碼較少(如小提琴中所示)。

+0

150磅:我測試了這個,它沒有工作。問題仍然存在,應用了.compSlider()方法的最新元素將更新所有以前使用過的.compSlider()應用的其他元素的所有「設置」。你可以在這裏看到兩個不同的DOM對象,它們都有不同的設置,但是兩者都顯示相同的設置(settings.container這是一個選擇器):http://cl.ly/0u0L1i433V3m1d2V0B1Z –

+0

不完全確定你在哪裏會出錯,但我建立了一個jsfiddle來演示我在說什麼:http://jsfiddle.net/kFL5N/。我不確定這是你想要做什麼,但它表明每個實例的獨立設置。 – Donamite

+0

150磅作品:在原文中查看「問題#2」。不過,我想我可能只是按照你所建議的方法去做。 –