2012-01-03 3 views
0

Ошибка:функция Javascript не определен

switchDiv не определен

JSFiddle пример здесь: http://jsfiddle.net/9s5Px/11/

Вот HTML разметка:

<div id="container"> 
    <div class="foo"> 
     <p>Div A</p> 
    </div> 

    <div class="foo"> 
     <p>Div B</p> 
    </div> 

    <div class="foo"> 
     <p>Div C</p> 
    </div> 
</div> 

И JavaScript:

$('.foo').fadeOut('fast'); 

var count = $('.foo').length; 
console.log(count); 

var currentItem = 0; 

function switchDiv() { 
    $('.foo').get(currentItem).fadeOut(); 
    if (currentItem < count - 1) {    
     $('.foo').get(currentItem + 1).fadeIn(); 
    } 
    else {   
     $('.foo').get(currentItem).fadeOut(); 
     currentItem = 0; 
     $('.foo').get(0).fadeIn(); 
    }   
} 

setTimeout("switchDiv()", 5000); 

ответ

5

Ваша строка кода, которую вы передаете в setTimeout, не имеет доступа к вашему локальному закрытию. Это eval ed глобально.

Передайте это сама функция, а не строка:

setTimeout(switchDiv, 5000); 

См here, никаких ошибок.

+0

Так что без скобок? Разве вам это не нужно, поскольку это функция? –

+0

Скобки для вызова функции, а не ее передачи. –

+0

10K - поздравления! –

2

В вашем jsfiddle есть проблема с определением области охвата. Не уверен в действительном коде, но поскольку вы не показываете, как это я называю js, я предполагаю, что это та же проблема.

Обратите внимание, что jsfiddle выполнит код, указанный вами внутри обработчика $(document).ready() (см. Параметры в левом верхнем углу), и поэтому вы должны быть определены здесь. Где, как ваш тайм-аут ищет switchDiv для глобального объекта, и эффективно это setTimeout("window.switchDiv()", 5000);

Решение состоит в том, чтобы либо передать ссылку на функцию setTImeout, либо определить setTimeout в глобальной области видимости, как this.

В качестве примечания стороны: Функция get() возвращает фактический объект DOM. Что вы, вероятно, ищете, это eq(), но учтите, что eq основан на 1.

+0

+1 Хорошее объяснение, не понимал, что код работает под другим контекстом, '$ (document) .ready()', из опций на левый ... – xandercoded

+0

@ Xander Утонченная и запутанная часть заключается в том, что добавление обработчика '$ (document) .ready()' в jsfiddle явно будет работать.Это связано с тем, что jQuery достаточно умен, чтобы немедленно запустить готовый обработчик, если DOM уже готов. –

0

два вопроса здесь:

1.Use

setTimeout(switchDiv, 5000); 

вместо оценки строки.

переключатель 2.insideDiv, вы использовали функцию get для возврата элемента dom в объект jQuery, и поэтому методы fadeIn и fadeOut неприменимы.

Модифицированный ЦСИ:

$('.foo').fadeOut('fast'); 

var count = $('.foo').length; 
console.log(count); 

var currentItem = 0; 

function switchDiv() { 
    $($('.foo').get(currentItem)).fadeOut(); 
    if (currentItem < count - 1) {    
     $($('.foo').get(currentItem + 1)).fadeIn(); 
    } 
    else {   
     $($('.foo').get(currentItem)).fadeOut(); 
     currentItem = 0; 
     $($('.foo').get(0)).fadeIn(); 
    }   
} 

setTimeout(switchDiv, 5000); 
Смежные вопросы