Javascript-форум - Смена класса у отдельного div при нажатии на ссылку

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Смена класса у отдельного div при нажатии на ссылку (https://javascript.ru/forum/dom-window/53708-smena-klassa-u-otdelnogo-div-pri-nazhatii-na-ssylku.html)

Смена класса у отдельного 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"?

Спасибо.

Просто.
Подскажу с 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, на которое есть своя функция

На каждый 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";
}

И так бесконечно?

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

Спасибо, но нельзя сказать, что работает...

Не хочешь - не говори. Дело твое. Сам код-то рабочий :)

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

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