jQuery插件中的全局变量

时间:2011-12-29 21:44:15

标签: javascript jquery plugins

好的家伙我一直在为JQtouch开发一种滑块,我的插件中有两种方法,一种是在启动时构建滑块,另一种是在旋转时重建滑块。我使用一个名为“count”的变量来保存当前幻灯片的编号。我的问题是,当移动设备旋转并调用“旋转”方法时,我丢失了变量。

我在我的设置中将count变量定义为“1”,似乎在调用rotate方法时,它采用默认设置“1”而不是当前幻灯片编号。这是我的插件代码;这很长。基本上我在init:方法中发生的一切,“计数”变量的所有滑动和滑动更改都不会延续到“旋转”方法。

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

1 个答案:

答案 0 :(得分:0)

如果我遵循了这一点,那么您的问题是您正在更改extended选项中的count值,这是一个局部变量。除非您将settings作为目标传递,否则这些更改不会像您想象的那样传播回settings。这可能不是你想要的,但我很确定它应该让你朝着正确的方向前进:

http://jsfiddle.net/DTnW8/