Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.09.2011, 23:48
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

можно ли изменить свойства соседнего элемента?..
Нужно изменить свойства элемента, являющегося соседним по отношению к элементу вызывающему функцию...
Доступа по 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>
...

По клику на конкретную ссылку, надо выводить содержимое <p>.
Если это нереально - бог с ним, могу и через селекторы пройти:
<a href="#" class="no_text" onclick="this.className='text'"></a>
.new_text{display:none;}
.text + .new_text{display:block;}

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

Последний раз редактировалось Nanto, 27.09.2011 в 23:51.
Ответить с цитированием
  #2 (permalink)  
Старый 28.09.2011, 00:17
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

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

<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>

Последний раз редактировалось Триви, 28.09.2011 в 00:30.
Ответить с цитированием
  #3 (permalink)  
Старый 28.09.2011, 11:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.09.2011, 13:08
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

ksa,
Да, хотел обойтись без фреймворков, но мне, с моей подготовкой наверное действительно лучше jQ заюзать...
Но тогда вопрос - в Вашем варианте нет проверки на "отображение элемента <p>"... А надо, чтобы по каждому клику открывалась или закрывалась...
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2011, 14:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.09.2011, 15:15
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

Спасибо! Так проще!
А то я уже начал городить:
var display = $('p.new_text').css('display');

и дальше присваивание через тернарный оператор...
Ответить с цитированием
  #7 (permalink)  
Старый 28.09.2011, 15:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Nanto, и это я еще на 50-той странице учебника по тому ЖиКвери...
Ответить с цитированием
  #8 (permalink)  
Старый 28.09.2011, 15:46
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

А мне приходится вот этим пользоваться...
Ответить с цитированием
  #9 (permalink)  
Старый 28.09.2011, 15:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Nanto, так кто мешает скачать еще и учебник... Там прям всё подробненько расписано чего, как и куда...
Ответить с цитированием
  #10 (permalink)  
Старый 28.09.2011, 16:00
Профессор
Отправить личное сообщение для Триви Посмотреть профиль Найти все сообщения от Триви
 
Регистрация: 23.04.2010
Сообщений: 354

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли средствами JS узнать высоту скрытого элемента? ацкий Общие вопросы Javascript 7 24.08.2011 19:07
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01
Можно ли изменить адресную строку без перезагрузки страницы (не якорь) Papa Общие вопросы Javascript 2 08.05.2010 03:45
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 13:08
Можно ли менять свойство NAME элемента? MaxTula Элементы интерфейса 6 09.02.2009 11:55