$ 不是函数错误

Question

我遇到了一些 Javascript 错误，想知道是否有人可以帮助我解决这些错误。我对 js 相当陌生，确实需要帮助。这里所说的是有错误的页面。 http://www.gotopeak.com 。

这是错误：

未捕获类型错误：对象 [object 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 的“Dollar 安全模式”的更多信息，请访问 此处。

Answer 2

编辑：请忽略。 igorw 的上述答案是正确的。对不起。

尝试将 $ 符号转换为“jQuery”。 $ 是 JQuery 的快捷方式。 $ 是为 WordPress 中的 Prototype 保留的。

编辑：您也可以尝试 jQuery.noConflict()。它将 $ 的控制权交还给 JQuery（或第一个实现它的库），因此它不会与其他也实现 $ 的库发生冲突。

Answer 3

这就是我所做的并解决了所有问题，转到index.php文件，立即调用jquery后，放置 < /代码>