2011-03-09 92 views
1

我有以下代碼jQuery插件變量

 
(function($) { 
    // carousel 
    var Carousel = { 
     settings: { 
      itemsPerPage: 1, 
      itemsPerTransition: 1, 
      noOfRows: 1, 
      pagination: true, 
      nextPrevLinks: true, 
      speed: 'normal', 
      easing: 'swing', 
      loop: false, 
      auto: true, 
      autoTime: 4000, 

      maxHeight: 300, 
      maxWidth: 500 
     }, 
     init: function(el, options) 
     { 
      if (!el.length) 
      { 
       return false; 
      } 

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

      this.container = el; 

      this.panelHeight = 0; 
      this.panelWidth = 0; 
      this.numPanels = 0; 

      // Find biggest panel in set 
      this.container.find(".tinycarousel > li > div").each(function() 
      { 
       if($(this).outerHeight() > this.panelHeight) 
       { 
        this.panelHeight = $(this).outerHeight(); 
       } 

       if($(this).outerWidth() > this.panelWidth) 
       { 
        this.panelWidth = $(this).outerWidth(); 
       } 

       this.numPanels++; 
      }); 

      alert(this.numPanels); 
     }, 
     autoSwitch: function() 
     { 
      this.container.find(".tinycarousel").animate({marginLeft: -panelWidth}); 
     } 
    }; 

    // bridge 
    $.fn.tinycarousel = function(options) { 
     return this.each(function() { 
      var obj = Object.create(Carousel); 
      obj.init($(this), options); 
      $.data(this, 'carousel', obj); 
     }); 
    }; 
})(jQuery); 

我在這裏的問題是,this.numPanels給出0的結果(和我知道應該是3)。它在我使用this.之前有效,並且只有numPanels作爲一個普通變量,但現在它不是。對不起,我無法提供更多信息,但我的問題是:我如何在jQuery插件'可編輯'內部創建變量。

編輯 我對任何混淆道歉 - 我只是不想發佈愚蠢的代碼,並使其不可讀。請看我上面的完整代碼。

EDIT 2我感覺像吸了pillock ......看看在autoSwitch功能 - 這是我得到一個錯誤:panelWidth is not defined這就是爲什麼我試圖使用this.

回答

9

this.numPanels ++是在範圍上本地您的每()調用的匿名函數。如果您將初始聲明替換爲var numPanels = 0;並在你的函數中訪問它(或通過引用在numPanels中傳遞),你會得到預期的結果。

做這樣的:

this.panelHeight = 0; 
this.panelWidth = 0; 
this.numPanels = 0; 
var self = this; // reference to this 
// Find biggest panel in set 
this.container.find(".tinycarousel > li > div").each(function() { 
    if($(this).outerHeight() > self.panelHeight) { // use self 
     self.panelHeight = $(this).outerHeight(); // use self 
    } 

    if($(this).outerWidth() > self.panelWidth){ // use self 
     self.panelWidth = $(this).outerWidth(); // use self 
    } 
    self.numPanels++; // use self 
}); 
+0

我對此感到抱歉 - 請參閱我的OP瞭解整個代碼。我應該已經更清楚了。 – Bojangles 2011-03-09 20:46:36

+0

更多編輯:-(對不起! – Bojangles 2011-03-09 20:52:19

+0

@JamWaffles - 查看編輯 – 2011-03-09 21:08:54

2

這聽起來像你在工作時使用全局變量。這不是很好的做法。 this可能需要包裝在jquery函數調用中。先試着做$(this).numPanels。我看不到剩下的代碼,所以我不知道這是否可行。如果不存在,則嘗試通過將其附加到DOM元素來存儲該變量。像這樣簡單的例子:

$('#myElement').data('numPanels', 0); // Storing the data. 

var numPanels = $('#myElement').data('numPanels'); // Retrieving the data. 
numPanels++; // Do work. 
$('#myElement').data('numPanels', numPanels); // Storing the new data. 
+0

我的混亂道歉 - 請我OP整個代碼。我應該更清楚。 – Bojangles 2011-03-09 20:46:20

+0

更多編輯:-(對不起! – Bojangles 2011-03-09 20:53:11

0

問題與此範圍內。

您在永久性之外創建了一個此變量,然後您想在每個函數中調用此變量。

他們有不同的範圍。

您需要創建一個全局變量,以便在每個對象中都可訪問。

var numPanels = 0;

,然後喲可以使用numPanels++;

+0

編輯我的OP(見**編輯2 **位) - 對不起。 – Bojangles 2011-03-09 20:53:30