jQuery插件中的全局變量

Question

好吧我一直在爲JQtouch設計一種滑塊，我的插件中有兩種方法，一種是在啓動時構建滑塊，另一種是在旋轉時重建滑塊。我使用一個名爲「count」的變量來保存當前幻燈片的編號。我的問題是，當旋轉移動設備並調用「旋轉」方法時，我失去了變量。

我在我的設置中將count變量定義爲「1」，並且似乎在調用rotate方法時，它將採用默認設置「1」而不是當前幻燈片編號。這是我的插件代碼;它很長。基本上，在我的init：方法中發生的所有事情，所有滑動和滑動更改「count」變量都不會轉移到「rotate」方法。

(function ($) { 
    var empty = {}; 
    var settings = { 
     count: 1, 
    }; 
    var methods = { 
     init: function (options, callback, defaults) { 
      var options = $.extend({}, 
      settings, options || {}); 
      return this.each(function() { 
       var $this = $(this); 
       if (options.height) { 
        mHeight = options.height; 
       } else { 
        mHeight = $(window).height(); 
       } 
       mWidth = $(window).width(); 
       mAmount = $('.swiper', this).length; 
       amount = $('.swiper', this).length; 
       holdWidth = mWidth * options.amount; 
       $('.swiper', this).height(mHeight); 
       $(this).height(mHeight); 
       $('.swiper', this).width(mWidth); 
       $(this).width(holdWidth); 
       $('.swipe_slide', this).width(holdWidth); 
       $('.swipe_slide', this).height(mHeight); 
       $('.swiper', this).each(function (i) { 
        var nwidth = mWidth * i; 
        $(this).css('left', nwidth); 
       }); 
       $('.swipe_slide', this).swipe(function (evt, data) { 
        var amount = $('.swiper', this).length; // alert($($this).attr('id')); 
        if (data.direction == 'left') { //alert('count: '+options.count+" amount: "+options.amount); 
         if (options.count != amount) { 
          moveWidth = options.count * -mWidth; 
          $('.swipe_slide', $this).css("left", moveWidth); 
          options.count++ 
         } else { 
          return 
         } 
        } else { 
         if (options.count != 1) { 
          moveWidth = moveWidth + mWidth; 
          $('.swipe_slide', $this).css("left", moveWidth); 
          options.count-- 
         } else { 
          return 
         } 
        } 
       }); 
      }); 
     }, 
     rotate: function (options, callback, defaults) { 
      var $this = $(this); 
      var options = $.extend({}, 
      settings, options || {}); 
      alert(options.count); 
      return this.each(function() { 
       if (options.height) { 
        mHeight = options.height; 
       } else { 
        mHeight = $(window).height(); 
       } 
       mWidth = $(window).width(); 
       mAmount = $('.swiper', this).length; 
       amount = $('.swiper', this).length; 
       holdWidth = mWidth * mAmount; 
       $('.swiper', this).height(mHeight); 
       $(this).height(mHeight); 
       $('.swipe_slide', this).height(mHeight); 
       $('.swiper', this).width(mWidth); 
       $(this).width(holdWidth); 
       $('.swipe_slide', this).width(holdWidth); 
       $('.swiper', this).each(function (i) { 
        var nwidth = mWidth * i; 
        $(this).css('left', nwidth); 
       }); 
       newMoveWidth = options.count * $(window).width(); 
       alert(options.count); 
       alert(newMoveWidth); //$('.swipe_slide',$this).css("left" , 0); 
      }); 
     } 
    } 
    $.fn.jCarousel = function (method, options) { 
     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 { 
      $.error('Method ' + method + ' does not exist on jQuery.jModalbox'); 
     } 
    }; 
})(jQuery); 

Answer 1

如果我跟着這個，你的問題是你改變extended選項，一個局部變量的計數值。除非您通過settings作爲目標，否則這些更改不會像您認爲的那樣傳播回settings。這也許不是你想要什麼，但我敢肯定它應該讓你在正確的方向前進：

http://jsfiddle.net/DTnW8/