можно ли изменить свойства соседнего элемента?..
Нужно изменить свойства элемента, являющегося соседним по отношению к элементу вызывающему функцию...
Доступа по 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>, а просто тупо меняет класс. |
1. в книжке такое не возбранялось :)
2. в контексте примера это безразницы 3. в контексте примера работает как нужно |
Триви, в свете последнего прочитаного, можно вообще вместо
.toggleClass('on')
использовать http://jquery-docs.ru/effects/toggle/ |
Цитата:
|
Цитата:
Так вот конструкция $(this) это уже элемент ЖиКвери и к нему можно применять нужные методы. P.S. Но что мешает убрать и попробовать! :D |
Это я к тому, что во второй части скрипта Вы вроде показываете все абзацы, так? Тогда причём тут указание на элемент DOM, вызвавший функцию (this)? Он просто присвоит всем соседним (по отношению к a.no_text_all) абзацам класс on... А надо по отношению ко всем ссылкам a.no_text.
P.S. Уж сменить класс всем <p> разом, я, конечно, смогу! :lol: |
Цитата:
Ладно, лучше поясню с помощью кода. Поскольку автор хотел JS чистяком, то вот:
<a href="#" id="sh">Открыть все</a><hr />
<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');
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';
}
}
sh.onclick = function () {
var vis;
if(this.innerHTML=='Открыть все') {
vis = 'block', this.innerHTML='Закрыть все';
} else {
vis = 'none', this.innerHTML='Открыть все';
}
var pArr = document.getElementsByTagName('P');
for (var i=0; i<pArr.length; i++) {
pArr[i].style.display = vis;
}
}
})();
</script>
|
ksa, кстати, а что это за конструкция такая?
.new_text.on { display:block; } В смысле «.on» - чьих будет? JS, jQuery, CSS? Просто впервые встречаю... И что это означает навешивается подкласс или это новый класс получается? Или это сугубо жикверивская "примочка"? И поймёт ли её браузер с отключенным js? |
Триви,
Спасибо большое, но прекратите все надо мной издеваться! :lol: Я размышлял-размышлял, плюнул на всё и решил подключить jQuery, начал по новой перелопачивать более ранние скрипты (чтобы перевести их на jQ), а тут Вы снова выдаёте на чистом js... |
Цитата:
|
yashka525,
Из-за 100кБ фреймворка? Или просто из-за понтов? Дык ради крути можно и на ассемблере писать, можно вообще в двоичной системе машинный код фигачить. Native code rules!! |
Nanto, не путайте Божий дар с яичницей..
jQ - это фреймворк, и не вместо JS, а в помощь!!! |
Цитата:
Селектор предназначен для элемента с двумя классами одновременно <div class='new_text on'></div> |
ksa,
Спасибо, не знал! :blink: |
Цитата:
|
В общем задача оказалось маленько сложнее, чем казалась в начале...
По клику на каждую ссылку, вернее на картинку с плюсиком - надо показывать скрытый текст и менять картинку с плюсика на минус, и наоборот. А внизу страницы есть две ссылки - одна показывает все скрытые абзацы (и соответсвенно меняет все плюсы на минусы), другая скрывает... Ну короче, чего-то навал... Вопрос - можно ли подсократить подобный код: http://jsfiddle.net/ude9R/4/ |
Nanto, начинай уже делать тестовый пример... Или начинаем говорить про деньги. :D
|
ksa,
Дык выложил же пример выше (и даже рабочий)!.. |
Nanto, ты про ссылку?
|
ksa,
Ну да - кликаешь по цветному квадратику - он меняет цвет (это для примера вместо спрайта) и показывает/скрывает абзац. У меня в рабочем шаблоне всё работает! Но сдаётся мне, что я слегка "наговнокодил" - можно ли проще записать подобную штуку (при том же функционале). |
Цитата:
|
Если неудобно по другим сайтам шарить, могу сюда скопировать:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.a_plus{
height:13px;
width:13px;
display:inline-block;
background-color:red;
}
.a_minus{
height:13px;
width:13px;
display:inline-block;
background:green
}
.a_hidetext{
display:none;
padding-left:18px;
}
.a_plus_min div{
display:inline-block;
width:11px;
height:11px;
background:red;
}
.a_minus_min div{
display:inline-block;
width:11px;
height:11px;
background:green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
(function() {
$(document).ready(function (){
$('div.a_plus-minus').click(function (){
var display = $(this).nextAll('p.a_hidetext').css('display');
if (display == 'none') {
$(this).nextAll('p.a_hidetext').css({'display' : 'block'});
$(this).removeClass('a_plus');
$(this).addClass('a_minus');
} else {
$(this).nextAll('p.a_hidetext').css({'display' : 'none'});
$(this).removeClass('a_minus');
$(this).addClass('a_plus');
}
})
})
$(document).ready(function (){
$('a.a_plus_min').click(function (){
$('p.a_hidetext').css({'display' : 'block'});
$('div.a_plus-minus').removeClass('a_plus');
$('div.a_plus-minus').addClass('a_minus');
})
$('a.a_minus_min').click(function (){
$('p.a_hidetext').css({'display' : 'none'});
$('div.a_plus-minus').removeClass('a_minus');
$('div.a_plus-minus').addClass('a_plus');
})
})
})();
</script>
</head>
<body>
<table>
<tr class="a_dnd"><td><div class="a_plus-minus a_plus"></div><a href="#">Lorem ipsum</a><p class="a_hidetext">consectetur adipisicing</p></td><td>бла</td><td>бла</td></tr>
<tr class="a_dnd"><td><div class="a_plus-minus a_plus"></div><a href="#">Lorem ipsum</a><p class="a_hidetext">consectetur adipisicing</p></td><td>бла</td><td>бла</td></tr>
<tr class="a_dnd"><td><div class="a_plus-minus a_plus"></div><a href="#">Lorem ipsum</a><p class="a_hidetext">consectetur adipisicing</p></td><td>бла</td><td>бла</td></tr>
<tr class="a_dnd"><td><div class="a_plus-minus a_plus"></div><a href="#">Lorem ipsum</a><p class="a_hidetext">consectetur adipisicing</p></td><td>бла</td><td>бла</td></tr>
<tr class="a_dnd"><td><div class="a_plus-minus a_plus"></div><a href="#">Lorem ipsum</a><p class="a_hidetext">consectetur adipisicing </p></td><td>бла</td><td>бла</td></tr>
<tr class="a_dnd_predown">
<td>
<a href="#" class="a_plus_min">
<div></div>
<span>Открыть</span>
</a>
<a href="#" class="a_minus_min">
<div></div>
<span>Закрыть</span>
</a>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
|
Цитата:
|
Nanto, например вместо анализа и смены display - воспользуйся методом
http://jquery-docs.ru/Effects/toggle/ |
Аналогисная приблуда есть и у class
http://jquery-docs.ru/Attributes/toggleClass/ |
ksa,
Спасибо тебе большое (я уж на «Ты» перейду - уже порядком тесно общаемся)! Мелочь вроде - а помогает двигаться в нужном направлении. И на деньгах тебя не так сильно циклит как остальных - "Ах ёптыть, мы яваскрипт целых два года учили! пусть теперь нам за каждую подсказку платят!" Кстати, также огромное спасибо и Триви - в этом проекте решил использовать jQ, но Ваши примеры мне также ещё пригодятся! Я вообще-то все страницы с моими "хотелками" на жёсткий сохраняю (на всякий случай)! |
Цитата:
|
| Часовой пояс GMT +3, время: 17:44. |