Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2015, 19:38
Новичок на форуме
Отправить личное сообщение для Maxim-Ra Посмотреть профиль Найти все сообщения от Maxim-Ra
 
Регистрация: 14.02.2015
Сообщений: 4

Смена класса у отдельного div при нажатии на ссылку
Всем привет. Нужна помощь.

Имеется конструкция из бесконечного ряда ссылок:

<a id="link_id_1">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_1">Показываетcя при нажатии по ссылке</div>
</a>

<a id="link_id_2">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_2">Показываетcя при нажатии по ссылке</div>
</a>

<a id="link_id_3">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_3">Показываетcя при нажатии по ссылке</div>
</a>

<a id="link_id_...">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_...">Показываетcя при нажатии по ссылке</div>
</a>

....


.show {display:block;}
.close {display:none;}

Как сделать так, чтобы при нажатии по ссылке соответствующий вложенный в нее div с классом "close" менял класс, скажем на "show", а при повторном нажатии по появившемуся div он обратно менял свой класс на "close"?

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2015, 20:29
Аспирант
Отправить личное сообщение для Нубопрогер Посмотреть профиль Найти все сообщения от Нубопрогер
 
Регистрация: 26.05.2014
Сообщений: 72

Просто.
Подскажу с id, но это может сработать и с class
<a id="link_id_..." onclick="datchik(1)" ondblclick="datchik(2)">

И сама функция:

Function datchik(x) {
if(x==1) {
document.getElementById('show').style.display="block";
}
if (x==2) {
document.getElementById('close').style.display="none";
}
}


Или в паре:
Function datchik(x) {
if(x==1) {
document.getElementById('show').style.display="block";
document.getElementById('close').style.display="none";
}
if (x==2) {
document.getElementById('close').style.display="block";
document.getElementById('show').style.display="none";
}
}


По клику один элемент становится видимым, другой - нет. При следующем клике из события onclick получаем ondblclick, на которое есть своя функция
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2015, 20:37
Новичок на форуме
Отправить личное сообщение для Maxim-Ra Посмотреть профиль Найти все сообщения от Maxim-Ra
 
Регистрация: 14.02.2015
Сообщений: 4

На каждый ID писать отдельную функцию?

if (x==2) {
document.getElementById('close').style.display="bl ock";
document.getElementById('show').style.display="non e";
}

if (x==3) {
document.getElementById('close').style.display="bl ock";
document.getElementById('show').style.display="non e";
}

if (x==4) {
document.getElementById('close').style.display="bl ock";
document.getElementById('show').style.display="non e";
}


if (x==5) {
document.getElementById('close').style.display="bl ock";
document.getElementById('show').style.display="non e";
}



И так бесконечно?
Ответить с цитированием
  #4 (permalink)  
Старый 14.02.2015, 21:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

var links = document.querySelectorAll('a');
var toggle = function() {
    var showed = this.querySelector('.show');
    var closed = this.querySelector('.close');
    showed.className = 'close';
    closed.className = 'show';
};
for (var i = 0; i < links.length; i++) {
    links[i].onclick = toggle;
}
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 14.02.2015, 21:39
Новичок на форуме
Отправить личное сообщение для Maxim-Ra Посмотреть профиль Найти все сообщения от Maxim-Ra
 
Регистрация: 14.02.2015
Сообщений: 4

Спасибо, но нельзя сказать, что работает...
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2015, 22:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Не хочешь - не говори. Дело твое. Сам код-то рабочий
<style>
.show{display:block}
.close{display:none}
</style>
<a id="link_id_1">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_1">Показываетcя при нажатии по ссылке</div>
</a>

<a id="link_id_2">
<div class="show">Показывается текст</div>
<div class="close" id="div_id_2">Показываетcя при нажатии по ссылке</div>
</a>

<script>
var links = document.querySelectorAll('a');
var toggle = function() {
    var showed = this.querySelector('.show');
    var closed = this.querySelector('.close');
    showed.className = 'close';
    closed.className = 'show';
};
for (var i = 0; i < links.length; i++) {
    links[i].onclick = toggle;
}
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2015, 12:20
Новичок на форуме
Отправить личное сообщение для Maxim-Ra Посмотреть профиль Найти все сообщения от Maxim-Ra
 
Регистрация: 14.02.2015
Сообщений: 4

Во! Так заработал. Спасибо огромное.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена картинки кнопки при нажатии и обратно при повторном нажатии mff Общие вопросы Javascript 15 03.05.2018 14:12
Смена цвета/картинки фона при нажатии на элемент Webtest Элементы интерфейса 16 20.04.2017 22:36
Сохранение цвета рамки DIV при нажатии, и сброс при нажатии на другой DIV этого класа Webtest Элементы интерфейса 3 29.06.2014 22:13
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Изменение класса в <div> при нажатии на него... xmartinesx Общие вопросы Javascript 2 08.10.2010 10:57