$不是函数错误

Question

我收到一些javascript错误,并想知道是否有人可以帮助我.我是js的新手,可以真正使用帮助.这里说的是带有错误的页面.http://www.gotopeak.com.

这是错误:

未捕获的TypeError:对象[对象DOMWindow]的属性'$'不是函数错误在第44行

这是代码:

    var hoverButton = {
    init : function() {     
        arrButtons = $$('.hover_button');

        for (var i=0; i<arrButtons.length; i++) {
            arrButtons[i].addEvent('mouseover', hoverButton.setOver);   
            arrButtons[i].addEvent('mouseout', hoverButton.setOff);
        }

    },
    setOver : function() {
        buttonImageSource = this.src;
        this.src = buttonImageSource.replace('_off.', '_hover.');
    }, 
    setOff : function() {
        buttonImageSource = this.src;
        if (buttonImageSource.indexOf('_hover.') != -1) {
            this.src = buttonImageSource.replace('_hover.', '_off.');
        }
    }
}

window.addEvent('domready', hoverButton.init);



var screenshots = {
    numScreens : 0,
    currScreen : 0,
    screenContainerAnimation : null,
    screenFadeSpeed : 200,
    animating : false,
    initialized: false,     

    init : function() {
        var arrScreens = $$('#screen_container .screenshot');
        screenshots.numScreens = arrScreens.length;

        screenshots.screenContainerAnimation = new Fx.Tween('screen_container', {
            duration: 300,
            transition: Fx.Transitions.Quad.easeInOut
        });

        var indicatorMold = $('indicatorMold');

        for(i=0; i<arrScreens.length; i++) { 

            var screenShot = arrScreens[i];
            screenShot.id = 'screenshot' + (i+1);

            var screenIndicator = indicatorMold.clone();
            screenIndicator.id = 'indicator' + (i+1);
            screenIndicator.inject('screen_indicators');
            screenIndicator.href = 'javascript: screenshots.setActiveScreen('+ (i+1)*1 +')';            

            screenShot.removeClass('hidden');               

            if (i==0) {
                var initialScreenHeight = screenShot.getCoordinates().height;
                $('screen_container').setStyle('height', initialScreenHeight);
                screenshots.currScreen = 1;
                screenIndicator.addClass('active');
            }
            else {
                screenShot.setStyle('opacity',0);
                screenShot.setStyle('display','none');
            }           

        } // loop

        screenshots.initialized = true;
    },

    next : function() {
        if (screenshots.initialized) {
            var nextNum = screenshots.currScreen + 1;

            if (nextNum > screenshots.numScreens) {
                nextNum = 1;
            }

            screenshots.setActiveScreen(nextNum);
        }

        return false;
    },

    previous : function() {
        if (screenshots.initialized) {
            var prevNum = screenshots.currScreen - 1;

            if (prevNum < 1) {
                prevNum = screenshots.numScreens;
            }

            screenshots.setActiveScreen(prevNum);
        }

        return false;
    },

    setActiveScreen : function(screenNum) {
        if(screenshots.animating == false) {
            screenshots.animating = true;
            var currScreen = $('screenshot' + screenshots.currScreen);
            var currIndicator = $('indicator' + screenshots.currScreen);
            var newScreen = $('screenshot' + screenNum);
            var newIndicator = $('indicator' + screenNum);

            currScreen.set('tween', {
                duration: screenshots.screenFadeSpeed,
                transition: Fx.Transitions.Quad.easeInOut,
                onComplete: function() { 
                    currIndicator.removeClass('active');
                    currScreen.setStyle('display','none') ;
                }
            }); 
            currScreen.tween('opacity', 0); 

            function resizeScreen() {       
                newScreen.setStyle('display','block');
                var newScreenSize = newScreen.getCoordinates().height;
                screenshots.screenContainerAnimation.start('height', newScreenSize);
            }

            function fadeInNewScreen() {

                newScreen.set('tween', {
                    duration: screenshots.screenFadeSpeed,
                    transition: Fx.Transitions.Quad.easeInOut,
                    onComplete: function() { 
                        newIndicator.addClass('active'); 
                        screenshots.animating = false;  
                    }
                });
                newScreen.tween('opacity', 1);
            }

            resizeScreen.delay(screenshots.screenFadeSpeed);
            fadeInNewScreen.delay(screenshots.screenFadeSpeed + 400);

            screenshots.currScreen = screenNum;
        }
    }
}

window.addEvent('load', screenshots.init)   ;

我将非常感激并感谢我在这个问题上得到的任何帮助.我会给你买啤酒作为回报.

感谢您的时间!

Answer 1

你的页面加载mootools一次,jQuery加载两次,jQuery UI加载两次.因为jQuery和mootools都定义了一个名为'$'的函数,所以这会给你带来冲突.

您可以通过使用自执行闭包来解决此问题,该闭包将非冲突版本的'$'映射到您实际可以使用的本地'$'变量.

(function($) {
    // your code
})(document.id);

有关MooTools"美元安全模式"的更多信息,请点击此处.