Question

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

这是错误：

Uncaught TypeError：对象[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“美元安全模式”的更多信息，请访问here。

Answer 2

编辑：请忽略。 igorw的上述答案是正确的。遗憾。

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

编辑：您也可以尝试jQuery.noConflict（）。它放弃了对JQuery（或第一个实现它的库）的控制权，因此它不会导致与其他实现$的库发生冲突。

Answer 3

这就是我所做的并解决了所有问题，转到index.php文件，在立即调用jquery后，放置<script type="text/javascript">jQuery.noConflict();</script>

$不是函数错误

3 个答案: