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

Я получаю несколько ошибок 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)   ;

Я был бы очень признателен и признателен за любую помощь, которую я получаю по этому вопросу.


person wilwaldon    schedule 03.02.2011    source источник
comment
Может кто-нибудь объяснить, почему в разных местах ОП использует $$? Например: arrButtons = $$('.hover_button');   -  person Chris    schedule 03.02.2011
comment
Это похоже на MooTools для меня. В этом коде нет ни капли jQuery.   -  person David Tang    schedule 03.02.2011
comment
Я считаю, что это mootools. Я унаследовал этот проект, поэтому я не был на 100% уверен, что использовал оригинальный разработчик.   -  person wilwaldon    schedule 03.02.2011
comment
@Chris в Mootools $ используется для получения элемента по идентификатору, подобному родному document.getElementById('id-string'); тогда как $$ используется для сокращения собственного документа document.querySelector('.class li'); jQuery не предоставляет API для getElementById (хотя их функция $ ищет строку, начинающуюся с #, и по умолчанию использует собственный getElementById).   -  person Chase Wilson    schedule 05.02.2011
comment
@Chase: Спасибо за разъяснения.   -  person Chris    schedule 05.02.2011


Ответы (3)


Ваша страница загружает mootools один раз, jQuery дважды и jQuery UI дважды. Поскольку и jQuery, и mootools определяют функцию с именем «$», это приводит к конфликтам.

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

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

Дополнительную информацию о «безопасном режиме доллара» MooTools можно найти здесь. .

person igorw    schedule 03.02.2011

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

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

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

person Please treat your mods well.    schedule 03.02.2011
comment
JavaScript чувствителен к регистру, поэтому это должен быть jQuery, а не JQuery. - person R. Martinho Fernandes; 03.02.2011
comment
Код на самом деле MooTools, и я отредактировал теги, чтобы отразить это. - person alex; 03.02.2011
comment
Спасибо, Алекс. Забыл добавить mootools в теги. - person wilwaldon; 03.02.2011
comment
В этом потоке есть еще несколько идей stackoverflow.com/questions/2812359/ - person Please treat your mods well.; 03.02.2011
comment
с каких пор $ зарезервировано для прототипа в wordpress? - person Dimitar Christoff; 03.02.2011
comment
Спасибо Родриго. Проверка этого решения. - person wilwaldon; 03.02.2011

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

person Patrick Mutwiri    schedule 26.01.2016