Ротатор DIV элементов на JavaScript - JavaScript, Ajax

JasperCRT · 25.12.2011, 16:18

В общем случае есть такой HTML документ:

Код HTML:

<body>
<div id='1' style="Display:block"></div>
<div id='2' style="Display:none"></div>
<div id='3' style="Display:none"></div>
и т.д.
</body>

Нужно чтобы при нажатие на кнопку вызывалась JavaScript функция и меняла display видимого элемента на none, а следующего ПО ОЧЕРЁДНОСТИ элемента на block.
Пытался сделать так:

Код HTML:

<script>
function textToggle(){ 
  textBlock = document.getElementById(i++);
  if (textBlock.style.display == 'none') { textBlock.style.display = 'block'; }
  else { textBlock.style.display = 'none'; }
}
</script>

Не вышло

Меняться здесь должен правда лишь один элемент но и он не меняется т.к. переменная i типа интежер сюда вообще не подходит. Нужна строка. Прошу помощи

AlexeyLem · 25.12.2011, 20:32

Нужен именно чистый js? С помошью того же jquery это элементарно делается.

nerv · 25.12.2011, 22:01

примерно так

Код:

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin:15px; }
            div { background-color:green; height:100px; margin:15px; text-align:center; width:100px; }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementsByTagName("body")[0].onclick = function(e) {
                    var x = e ? e.target : event.srcElement;
                    if(x.nodeName == "DIV") {
                        var j = document.getElementsByTagName("div");
                        for(var i = 0; i < j.length; i++) {
                            if(j[i] == x) {
                                if(++i < j.length) {
                                    j[i].style.display = "block";
                                    x.style.display = "none";
                                    break;
                                }
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>
</html>

Naive · 26.12.2011, 08:12

Логичнее всего использовать обход элементов через узлы ДОМ, как у nerv. Плюсом к коду выше можно почитать статейку пройдем по dom.

JasperCRT · 26.12.2011, 14:13

Большое спасибо попробую разобраться

JasperCRT · 26.12.2011, 14:22

AlexeyLem а как это можно реализовать с помощью Jquery?

Cronos20 · 26.12.2011, 14:51

Код:

$("body").delegate("div", "click", function(){
    $(this).hide().next().show();
})

JasperCRT · 26.12.2011, 15:15

Вот только проблема мне это нужно сделать по нажатию на кнопку

Код:

<input type="submit" name="bt1" id="bt1" value="Отправить">

а не по нажатию на сам div элемент

Cronos20 · 26.12.2011, 16:23

Код:

$("#bt1").click(function(){
  $("div:visible").hide().next().show();
  return false; //  чтобы submit не сработал ... хотя лучше button использовать
})

25.12.2011, 16:18	#1
JasperCRT Пользователь Регистрация: 23.12.2010 Сообщений: 40	Ротатор DIV элементов на JavaScript В общем случае есть такой HTML документ: Код HTML: <body> <div id='1' style="Display:block"></div> <div id='2' style="Display:none"></div> <div id='3' style="Display:none"></div> и т.д. </body> Нужно чтобы при нажатие на кнопку вызывалась JavaScript функция и меняла display видимого элемента на none, а следующего ПО ОЧЕРЁДНОСТИ элемента на block. Пытался сделать так: Код HTML: <script> function textToggle(){ textBlock = document.getElementById(i++); if (textBlock.style.display == 'none') { textBlock.style.display = 'block'; } else { textBlock.style.display = 'none'; } } </script> Не вышло Меняться здесь должен правда лишь один элемент но и он не меняется т.к. переменная i типа интежер сюда вообще не подходит. Нужна строка. Прошу помощи Интернет как жизнь - смысла нет, а уходить не хочется!

26.12.2011, 08:12	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Логичнее всего использовать обход элементов через узлы ДОМ, как у nerv. Плюсом к коду выше можно почитать статейку пройдем по dom. Alar, верни репу!

26.12.2011, 14:13	#5
JasperCRT Пользователь Регистрация: 23.12.2010 Сообщений: 40	Большое спасибо попробую разобраться Интернет как жизнь - смысла нет, а уходить не хочется!

26.12.2011, 14:22	#6
JasperCRT Пользователь Регистрация: 23.12.2010 Сообщений: 40	AlexeyLem а как это можно реализовать с помощью Jquery? Интернет как жизнь - смысла нет, а уходить не хочется!

26.12.2011, 14:51	#7
Cronos20 Форумчанин Регистрация: 08.07.2010 Сообщений: 679	Код: `$("body").delegate("div", "click", function(){ $(this).hide().next().show(); })`

25.12.2011, 20:32	#2
AlexeyLem Пользователь Регистрация: 23.12.2011 Сообщений: 15	Нужен именно чистый js? С помошью того же jquery это элементарно делается.

26.12.2011, 15:15	#8
JasperCRT Пользователь Регистрация: 23.12.2010 Сообщений: 40	Вот только проблема мне это нужно сделать по нажатию на кнопку Код: `<input type="submit" name="bt1" id="bt1" value="Отправить">` а не по нажатию на сам div элемент Интернет как жизнь - смысла нет, а уходить не хочется!

26.12.2011, 16:23	#9
Cronos20 Форумчанин Регистрация: 08.07.2010 Сообщений: 679	Код: `$("#bt1").click(function(){ $("div:visible").hide().next().show(); return false; // чтобы submit не сработал ... хотя лучше button использовать })`

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
JavaScript проблема с добавлением элементов в массив	Jevgenia	Помощь студентам	0	12.10.2011 23:09
Вычисление среднего арифметического элементов массива. Не выполняется команда div.	Ibanez Wizard	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	2	28.03.2011 16:54
Перебор элементов собственного класса (JavaScript)	DaeMooN	JavaScript, Ajax	3	24.01.2009 16:28
Ротатор ссылок (TDS) на java	imsha	JavaScript, Ajax	0	19.11.2008 12:47
Ротатор баннеров	Alar	JavaScript, Ajax	3	21.06.2008 13:20