|
можно ли изменить свойства соседнего элемента?..
Нужно изменить свойства элемента, являющегося соседним по отношению к элементу вызывающему функцию...
Доступа по 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. Ну и понятное дело, что повторный клик должен возвращать всё на круги своя (т.е. надо ещё и классы сравнивать). |
Я правильно понял задачу?
<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>
|
Более универсальный вариант + с "общей" ссылкой. :)
<!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>
|
ksa,
Да, хотел обойтись без фреймворков, но мне, с моей подготовкой наверное действительно лучше jQ заюзать... Но тогда вопрос - в Вашем варианте нет проверки на "отображение элемента <p>"... А надо, чтобы по каждому клику открывалась или закрывалась... |
Цитата:
<!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>
|
Спасибо! Так проще!
А то я уже начал городить:
var display = $('p.new_text').css('display');
и дальше присваивание через тернарный оператор... |
Nanto, и это я еще на 50-той странице учебника по тому ЖиКвери... :lol:
|
А мне приходится вот этим пользоваться...
|
Nanto, так кто мешает скачать еще и учебник... :D Там прям всё подробненько расписано чего, как и куда...
|
ksa, при всём моём уважении...
1. зачем два обработчика onload? 2. зачем он вообще, если вы помещаете скрипт после блока, с которым работаете? 3. Открыть/закрыть все <P> работает криво, потому что работает не со всеми <P>, а просто тупо меняет класс. |
| Часовой пояс GMT +3, время: 07:35. |
|