Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   нужна помощь с решением задачи (https://javascript.ru/forum/misc/16956-nuzhna-pomoshh-s-resheniem-zadachi.html)

igsavenko 30.04.2011 08:18

нужна помощь с решением задачи
 
Объясните, как сделать следующее в JS без jquery чтобы получить следующее:

По нажатию на h1 нужно найти следующий элемент и переключить класс с одного на другой (видимый на не видимый и наоборот)
Этих элементов может быть несколько

<div class = "action">
<h5>Тут Заголовок</h5>
<div class="test">
у этого элемента нужно переключать класс
</div>
</div>
<div class = "action">
<h5>Тут Заголовок</h5>
<div class="test">
у этого элемента нужно переключать класс
</div>
</div>
<div class = "action">
<h5>Тут Заголовок</h5>
<div class="test">
у этого элемента нужно переключать класс
</div>
</div>


Заранее спасибо.

poorking 30.04.2011 08:56

назначаете обработчик click на h1 (вы так написали, хотя в коде у вас h5), чтобы обратиться в следующей node, у нод есть свойство nextSibling, но в данном примере оно будет указывать на textNode, надо рекурсивно добраться до следующего элемента проверяя каждый раз его nodeType, когда оно == 1, значит это не textNode (у него nodeType == 3), а ваш искомый элемент, назначаете ему нужный className

monolithed 30.04.2011 09:28

igsavenko, пользуйтесь поиском http://javascript.ru/forum/misc/1690...hee-menyu.html

with-love-from-siberia 30.04.2011 10:04

Цитата:

Сообщение от poorking
назначаете обработчик click на h1

Лучше назначить один обработчик document.onclick (любым удобным способом), в котором определить целевой элемент (h1), найти следующий элемент (поиск nextSibling, у которого div.className == 'test') и его сворачивать/показывать. Рекурсия здесь не нужна.

igsavenko 30.04.2011 10:43

а что вы имеете ввиду под "в котором определить целевой элемент (h1)"?

poorking 30.04.2011 10:48

with-love-from-siberia,
Естественно лучше один обработчик.
Но как вы разом найдете следующий div у которого класс test? вы будете смотреть nextSibling, потом смотреть не див ли он, потом смотреть какой у него класс, если не подходит, то возьмете nextSibling того nextSiblig-а, и также проверите,
var next = h1elem.hextSibling;
while(next.nodeType != 3 && next.tagName != "DIV" && next.className != "myclass"){
 next = next.nextSibling;
}

next.className = "new_class";

Я вот это имел ввиду под рекусией, не точно сформулировал

with-love-from-siberia 30.04.2011 14:43

Цитата:

Сообщение от poorking
не точно сформулировал

перебор связного списка.

Цитата:

Сообщение от igsavenko
в котором определить целевой элемент (h1)

Событие содержит информацию самом событии и об элементе, с которым это событие связано.

Почитайте: http://javascript.ru/tutorial/events, раздел "Элементы, связанные с событием"


Часовой пояс GMT +3, время: 08:36.