Как реализовать цикл реагирования на клик?

Question

[VANY]

Здравствуйте.
Есть следующие DOM-элементы:

<div id="parent-1">
    <div id="child-1"></div>
</div>
<div id="parent-2">
    <div id="child-2"></div>
</div>
<div id="parent-3">
    <div id="child-3"></div>
</div>

Каким образом можно присвоить класс элементу parent-* при нажатии на child-*?

Answer 1

[Сева]

document.addEventListener('click', function(e) {
      if (e.target.getAttribute('id').substr(0, 5) == 'child') {
        e.target.parentNode.className = 'test';
      }
    });

Comments

[Денис Букреев]

лудши тогда завернуть все элементы в id="parents" и делегировать внутри этого блока

Answer 2

[leni_m]

<div id="parent-1">
    <div class="child" id="child-1" data-id="1"></div>
</div>

Jquery

$('.child').on('click', function(){
   var id = $(this).attr('data-id');
   $('#parent-'+id).addClass('class');
});

Comments

[Денис Букреев]

Если jQuery юзаем, не проще .parent() использовать?

[leni_m]

Денис Букреев, да я нубас, не обращай внимания)

[VANY]

нубас не нубас, но решение с атрибутом - хорошее, его и буду использовать, но не на jquery :)

Answer 3

[Павел Корнилов]

<div id="test">
	<div id="parent-1">
    <div id="child-1">child-1</div>
</div>
<div id="parent-2">
    <div id="child-2">child-2</div>
</div>
<div id="parent-3">
    <div id="child-3">child-3</div>
</div>
</div>


<script type="text/javascript">
'use strict';
var test= document.getElementById('test');

test.onclick= function(e) {
	var t= e.target;
	if (t.id.indexOf('child') === -1) return;
	t.parentNode.classList.add('myClass');
	e.stopPropagation();
}
</script>

Answer 4

[Денис Букреев]

попробуй классы - классная штука, придумана специально для подобных задач
ты никак не сможешь в цикле это сделать, потому что нет обобщения у парентов, чтобы посчитать их кол-во и определить конец цикла

еще jQuery неплохая штука

Comments

[VANY]

Пожалуйста конкретнее?
Мне надо, что при нажатии на дочерний элемент менялся класс у родительского именно того же ID, т.е. если нажмут на child-3, то измениться должен parent-3.

[Денис Букреев]

Иван Украинцев, назначаешь классы, при клике на child берешь его parentNode и присваиваешь класс

[Сева]

Денис Букреев, пусть делегирует, если очень хочется. Ниже написал решение. Но вообще задача странная.

[Денис Букреев]

Сева, скорее он впервые столкнулся с JS и не знает как правильно поставить вопрос

[VANY]

ID или CLASS - в данном контексте не важно, мне вот вообще понравилась идея ниже с отдельным атрибутом, я могу вынести туда порядковый номер и от него плясать.
Не понял - почему вас так задело использование id?:)

[Сева]

Иван Украинцев, id уже лет десять как не модно, никто ими не пользуется. Спецефично и не нужно.

[VANY]

Сева, странный аргумент, не находите?) для каждого инструмента должна быть своя задача. Я, при помощи id обозначаю уникальные элементы, к которым хочу получить доступ зная, что только к ним его получу. Классы же наоборот для классификации и унификации стилей и js.
Понимаю, что БЭМ всему голова, но и он не запрещает использовать id.

[Kovalsky]

Иван Украинцев, "для каждого инструмента должна быть своя задача" - верно, и в данной задаче класс был бы гораздо более подходящим вариантом, потому что он является просто меткой, а ID как раз существует не для этого, как минимум из-за логики связанной с ID и выполняющейся при инициализации документа. Более того, ваш хардкод в виде прописывания конкретных связей вручную это совсем лишнее, достаточно было бы просто описать связи относительно, они ведь у вас статичные.

"Понимаю, что БЭМ всему голова, но и он не запрещает использовать id." - о том, что нельзя использовать ID написано в первых строках любых материалов, описывающих BEM naming conventions.