$ не является ошибкой функции

Question

Я получаю несколько ошибок JavaScript и мне было интересно, если кто-нибудь может помочь мне с ними. Я довольно новичок в JS и действительно могу использовать помощь. Это, как говорится здесь, страница с ошибками. http://www.gotopeak.com/.

Вот ошибка:

Uncaught 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. Поскольку и jQuery, и mootools определяют функцию с именем '$', это вызывает конфликты.

Вы можете исправить это, используя самозапускающееся замыкание, которое отображает бесконфликтную версию '$' в локальную переменную '$', которую вы действительно можете использовать.

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

Более подробную информацию о "Dollar Safe Mode" от MooTools можно найти здесь.

Answer 2

Изменить: пожалуйста, игнорируйте. Приведенный выше ответ от igorw является правильным. Сожалею.

Попробуйте преобразовать ваши символы $ в "jQuery". $ является ярлыком для JQuery. $ зарезервировано для прототипа в Wordpress.

Изменить: вы также можете попробовать jQuery.noConflict(). Он отказывается от управления $ back для JQuery (или первой библиотеки, которая его реализует), поэтому он не вызывает конфликта с другими библиотеками, которые также реализуют $.

Answer 3

Это то, что я сделал и все решил, перейдите в файл index.php, после немедленного вызова jquery, поместите <script type="text/javascript">jQuery.noConflict();</script>