Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Перебор Div'ов и их последовательный показ

Автор: crang 16.9.2010, 14:35

Доброго времени суток. Задача такова: есть текстовые файлы, их содержимое извлекается в div'ы средствами пхп:

Код


<div id="novosti-ban">
<?php
$cntr = 0;
$path = "/";
foreach (glob("*.txt") as $filename) {
    $cntr++;?>
    
    <div style="position:absolute;margin-top:10px;text-align:center;width:300px;visibility:hidden" id=<? echo '"' . $cntr . '"'; ?> ><p>
    <? $banner_text = file($filename); 
       foreach($banner_text as $str){ echo $str; }?>
    </p></div>
<? } ?>
</div>

как результат, внутри div'а novosti-ban создаются div'ы один над другим, по количеству текстовых файлов, каждому присваивается id - порядковый номер. Далее средствами JavaScript необходимо поочередно показать на какой-то интервал каждый div (должно выйти что-то типа баннера):

Код


<script>

function hide(id) {
     to_hide = document.getElementById('novosti-ban').children;
     to_hide.item(id).style.visibility = "hidden";
}

function show(id) {
     to_show = document.getElementById('novosti-ban').children;
     to_show.item(id).style.visibility = "visible";
}

divs = document.getElementById('novosti-ban').children;
for (i = 0; i < divs.length; i++) {
    caller_show = 'show(' + i + ')'; 
    caller_hide = 'hide(' + i + ')'; 
    g = setTimeout(caller_show,5000);
    f = setTimeout(caller_hide,10000);
}

</script>

Проблема в том, что слои отображаются все одновременно и скрываются так-же, никак не соображу - как заставить их делать это последовательно, по одному? Заранее спасибо.

Автор: bars80080 16.9.2010, 15:05

ясен пень одновременно. вы же цикл сразу прогоняете, создаёте кучу таймеров, половина которых срабатывает через 5 секунд, остальные через 10. последовательная работа во времени никогда не задаётся через цикл. это надо запомнить

сделайте что-нибудь такого заместо последнего:

Код


divs = document.getElementById('novosti-ban').children;
var len = divs.length;
var count = 0;
tm = setInterval('qw()', 10000);
function qw() {
    g = setTimeout(function() { show(count); },5000);
    f = setTimeout(function() { hide(count); },10000);
    count++;
    if(count > len) { count = 0; }
}

Автор: crang 17.9.2010, 11:02

никак не могу понять химию процесса

Код


divs = document.getElementById('novosti-ban').children;
var len = divs.length;
var count = 0;
tm = setInterval('qw()', 10000);
function qw() {
    g = setTimeout(function() { show(count); },5000);
    f = setTimeout(function() { hide(count); },10000);
    count++;
    if(count > len/2) { count = 0; }
}

представляю себе это так, в случае с len=4(это при двух вложенных div):

время (сек)                   событие
0                                   создается таймер  setInterval('qw()', 10000), ф-я  qw() сработает через 10 сек
5                                   ничего не происходит
10                                 выполняется ф-я   qw(), создаются 2 таймера setTimeout(function() { show(count); },5000) и setTimeout(function() { hide(count); },10000)
15                                 срабатывает таймер setTimeout(function() { show(count); },5000), выполняется ф-я show(count), появляется div1
20                                 срабатывает таймер setTimeout(function() { hide(count); },10000), выполняется ф-я hide(count) - div1 скрыт,  выполняется ф-я
                                               qw(), создаются 2 таймера setTimeout(function() { show(count); },5000) и setTimeout(function() { hide(count); },10000)
25                                 срабатывает таймер setTimeout(function() { show(count); },5000), выполняется ф-я show(count), появляется div2
30                                 срабатывает таймер setTimeout(function() { hide(count); },10000), выполняется ф-я hide(count) - div2 скрыт,  выполняется ф-я   qw(),
                                     создаются 2 таймера setTimeout(function() { show(count); },5000) и setTimeout(function() { hide(count); },10000) .......

если что-то не так представляю - поправьте, пожалуйста, уверен что-то не так, потому как на практике выглядит следующим образом - www.ktm.net.ua (на фоне синего баннера, справа внизу test и test1)

Автор: bars80080 17.9.2010, 14:11

оно работает или нет?

Автор: crang 17.9.2010, 16:34

bars80080, уже работает ) спасибо за наводку и консультации. рабочий вариант:

Код


function hide(id) {
     to_hide = document.getElementById('novosti-ban').children;
     if (document.getElementById('novosti-ban').childNodes[id].nodeType == 1) { to_hide.item(id).style.visibility = "hidden"; }
}

function show(id) {
     to_show = document.getElementById('novosti-ban').children;
     if (document.getElementById('novosti-ban').childNodes[id].nodeType == 1) { to_show.item(id).style.visibility = "visible"; }
}


divs = document.getElementById('novosti-ban');
var len = divs.getElementsByTagName("div").length;
var count = 1;
tm = setInterval('qw()', 8000);
function qw() {
      if(count > 1 ) {document.getElementById(count-1).style.visibility = "hidden";}
      else if(count = 1 ) {document.getElementById(len).style.visibility = "hidden";}
      document.getElementById(count).style.visibility = "visible";
    count++;
    if(count > len) { count = 1; }

}

Автор: bars80080 17.9.2010, 19:36

тогда можно и описать. а то чего описывать, если не работает?

собственно, уже сам всё и описал.

Цитата(crang @ 17.9.2010, 11:02

)

срабатывает таймер setTimeout(function() { show(count); },5000)

это правильнее читается так: выполняется анонимная функция, которая запускает функцию show(0) с аргументом 0. так как в момент первого выполнения qw(), count равен 0

далее тоже самое, меняется только count

напрямую записать

Код


setTimeout('show('+ count')', 5000)

нельзя, так как это прямой код к исполнению, и count в этом слечае немедленно превратится в значение. то есть для каждого последующего запуска функции qw() там уже не будет переменной count, а будет значение 0, всегда.
локализуя код в функцию (пусть даже и анонимную), мы откладываем исполнение до вызова этой функции