@Kerhin

При клике добавить 2-й класс блока другому элементу?

У меня есть элемент с классом .container и допустим 4 блока с общим классом .block и при этом у каждого есть еще свой индивидуальный класс (_black, _blue, _red, _yellow).

Надо, что бы при клике на каждый из элементов c классом .block добавлялся его собственный 2-й класс к элементу .container.

Н-р: Я кликаю на 1-й элемент, у которого есть свой класс (_black) и этот индивидуальный класс добавляется к элементу с классом (.container). После я кликаю по 3-му блоку, и у контейнера удаляется класс _black и заменяется на класс _red.

Дело в том, что я знаю как это сделать на jQuery, но хотелось бы все это реализовать на чистом js. Но к сожалению пока не получается.

<div class="container"></div>

<div class="block _black"></div>
<div class="block _blue"></div>
<div class="block _red"></div>
<div class="block _yellow"></div>
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
Mr_Sergo
@Mr_Sergo
https://codepen.io/Mr_Sergo/pen/GVMear
let block = document.querySelectorAll('.block');
let container = document.querySelector('.container');

for(let el of block){
	el.addEventListener('click',()=> {
		container.setAttribute('class',`${container.classList[0]} ${el.classList[1]}`);
	});
}

ну или через делегирование
<div class="container"></div>

<div class="blocks">
	<div class="block _black"></div>
	<div class="block _blue"></div>
	<div class="block _red"></div>
	<div class="block _yellow"></div>
</div>

let container = document.querySelector('.container');

document.querySelector('.blocks').addEventListener('click',e => {
	if(e.target.classList.contains('block')) container.className = `${container.classList[0]} ${e.target.classList[1]}`;
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Александрия Москва
от 200 000 до 250 000 руб.
Foodtronics Москва
от 100 000 до 200 000 руб.
Алгоритмика Москва
от 120 000 до 200 000 руб.
20 авг. 2019, в 13:27
2000 руб./за проект
20 авг. 2019, в 13:14
8000 руб./за проект
20 авг. 2019, в 13:02
100000 руб./за проект