Форум

Nanto · #1 (**permalink**) 27.09.2011, 23:48

Нужно изменить свойства элемента, являющегося соседним по отношению к элементу вызывающему функцию...
Доступа по id нет, только по классу и элементу-инициализатору.
Чтобы понятнее...
есть набор таких конструкций:

<a href="#" class="no_text">Бла-бла</a><p class="new_text" style="display:none">-бла...</p>
<a href="#" class="no_text">Бла-бла</a><p class="new_text" style="display:none">-бла...</p>
...

По клику на конкретную ссылку, надо выводить содержимое .
Если это нереально - бог с ним, могу и через селекторы пройти:

<a href="#" class="no_text" onclick="this.className='text'"></a>
.new_text{display:none;}
.text + .new_text{display:block;}

Но заковыка ещё в том, что должна быть отдельная ссылка, которая распахнёт или закроет все .
В принципе, опять-таки ничего сложного, но хотелось бы какое-то простое и элегантное решение, а не лепить отдельно this, и отдельно getElementsByClass...
P.S. Ну и понятное дело, что повторный клик должен возвращать всё на круги своя (т.е. надо ещё и классы сравнивать).

Триви · #2 (**permalink**) 28.09.2011, 00:17

Я правильно понял задачу?

<a href="#" class="no_text">Бла-бла1</a><p class="new_text" style="display:none">1-бла...</p>
<a href="#" class="no_text">Бла-бла2</a><p class="new_text" style="display:none">2-бла...</p>
<a href="#" class="no_text">Бла-бла3</a><p class="new_text" style="display:none">3-бла...</p>

<script type='text/javascript'>
(function() {
  var aArr = document.getElementsByTagName('A');
  var sum=0;
  for (var i=0; i<aArr.length; i++)  {
    aArr[i].onclick = function() {
        var p = this.nextSibling,
            vis = p.style.display;
        p.style.display = (vis=='none') ? 'block' : 'none';
    }
  }
})();
</script>

ksa · #3 (**permalink**) 28.09.2011, 11:50

Более универсальный вариант + с "общей" ссылкой.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<a href="#" class="no_text_all">Бла-бла</a>
<a href="#" class="no_text">Бла-бла1</a>
<p class="new_text" style="display:none">1-бла...</p>
<a href="#" class="no_text">Бла-бла2</a>
<p class="new_text" style="display:none">2-бла...</p>
<a href="#" class="no_text">Бла-бла3</a>
<p class="new_text" style="display:none">3-бла...</p>

<script type='text/javascript'>
(function() {
	$(document).ready(function (){
		$('a.no_text').click(function (){
			$(this).next('p').show()
		})
	})
	$(document).ready(function (){
		$('a.no_text_all').click(function (){
			$(this).nextAll('p').show()
		})
	})
})();
</script>
</body>
</html>

Nanto · #4 (**permalink**) 28.09.2011, 13:08

ksa,
Да, хотел обойтись без фреймворков, но мне, с моей подготовкой наверное действительно лучше jQ заюзать...
Но тогда вопрос - в Вашем варианте нет проверки на "отображение элемента "... А надо, чтобы по каждому клику открывалась или закрывалась...

ksa · #5 (**permalink**) 28.09.2011, 14:48

Сообщение от Nanto

чтобы по каждому клику открывалась или закрывалась

Ну это уже можно и как домашнее задание было сделать...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.new_text {
	display: none;
}
.new_text.on {
	display:block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<a href="#" class="no_text_all">Бла-бла</a>
<a href="#" class="no_text">Бла-бла1</a>
<p class="new_text">1-бла...</p>
<a href="#" class="no_text">Бла-бла2</a>
<p class="new_text">2-бла...</p>
<a href="#" class="no_text">Бла-бла3</a>
<p class="new_text">3-бла...</p>

<script type='text/javascript'>
(function() {
	$(document).ready(function (){
		$('a.no_text').click(function (){
			$(this).next('p').toggleClass('on')
		})
	})
	$(document).ready(function (){
		$('a.no_text_all').click(function (){
			$(this).nextAll('p').toggleClass('on')
		})
	})
})();
</script>
</body>
</html>

Nanto · #6 (**permalink**) 28.09.2011, 15:15

Спасибо! Так проще!
А то я уже начал городить:

var display = $('p.new_text').css('display');

и дальше присваивание через тернарный оператор...

ksa · #7 (**permalink**) 28.09.2011, 15:32

Nanto, и это я еще на 50-той странице учебника по тому ЖиКвери...

Nanto · #8 (**permalink**) 28.09.2011, 15:46

А мне приходится вот этим пользоваться...

ksa · #9 (**permalink**) 28.09.2011, 15:49

Nanto, так кто мешает скачать еще и учебник...

Там прям всё подробненько расписано чего, как и куда...

Триви · #10 (**permalink**) 28.09.2011, 16:00

ksa, при всём моём уважении...
1. зачем два обработчика onload?
2. зачем он вообще, если вы помещаете скрипт после блока, с которым работаете?
3. Открыть/закрыть все работает криво, потому что работает не со всеми , а просто тупо меняет класс.

Форум

Справочник

Discord чат

Курсы javascript