Как сделать, чтобы при клике на MORE/BACK переключалась только одна конкретная карточка, а не все сразу на чистом JS?

[rimkam]

Есть такая, упрощенная для примера, разметка карточек товара:

<section class="cards_wrapper">
	<div class="card">
		<div class="face">
			<img class="picture" src="img/meter.png" alt="">
			<p class="more link">MORE</p>
		</div>
		<div class="description">
			<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
			<p class="back link">BACK</p>
		</div>
		</div>
	<div class="card">
		<div class="face">
			<img class="picture" src="img/size.png" alt="">
			<p class="more link">MORE</p>
		</div>
		<div class="description">
			<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
			<p class="back link">BACK</p>
		</div>
	</div>
	<div class="card">
		<div class="face">
			<img class="picture" src="img/weighing-scale.png" alt="">
			<p class="more link">MORE</p>
		</div>
		<div class="description">
			<h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
			<p class="back link">BACK</p>
		</div>
	</div>
</section>

Пробный JS:

const cardsLink = document.querySelectorAll(".link");
const cardsFace = document.querySelectorAll(".face");
cardsLink.forEach(cLink => {
	cLink.addEventListener("click", function() {
		cardsFace.forEach(cFace => {
			cFace.classList.toggle("on");
		});
	});
});

css:

.on {
	transform: translateX(-100%);
}

Как сделать, чтобы при клике на MORE/BACK переключалась только одна конкретная карточка, а не все сразу? Должно быть много карточек. Нужно реализовать на чистом JS без jQuery.
В JS знания пока очень поверхностные.

[maks1331]

Мудреный способ повесить обработчик события у тебя, казалось бы, такая простая задача, а у тебя аж ёлочный форейч.

Если по делу: Саму функцию обработки нужно сделать направленной.

Как?

Задай три атрибута: по 1 на каждую кнопку и 1 на контейнер карточки, условно:

data-parent-id="card1"
data-parent-id="card1"
data-id="card1"

В функции, которая сразабывает при клике теперь нужно считать этот атрибут и если он не установлен - залогировать ошибку, если есть - найти карточку с таким атрибутом и работать с ней.

[Agency]

наверное нет необходимости перебирать "cardsFace"
попробуй поработать с this внутри анонимной функции...
получить блок в котором произошло событие можно через closest