Есть ли простой способ найти конкретный элемент, если кликаешь на другой элемент?

Question

[Minat0_]

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

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

Примерный код:

HTML:

<div class="card">
<p class="item">Кликни, чтобы перевернуть карточку!</p>
</div>
<div class="card">
 <p class="item">Кликни, чтобы перевернуть карточку!</p>
</div>

JS:

item.forEach(item => item.addEventListener("click", function (e) {
// Можно ли здесь обойтись без этого и использовать что-то другое?
	for (var i of item) {
		f (e.target.parentElement == i) {
			card = i;
			break;
		}
	}
card.addEventListener("click", function () {
  card.style.transform = "rotateX(35deg)";
});
});

Есть ли другой способ более лёгкий и простой?

CodePen

https://codepen.io/Minat0_/pen/rNavqmb

Comments

[Модератор]

Minato дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац). В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Minat0_]

Модератор, понял, большое спасибо.

Answer 1

[dollar]

Да, есть.

Эти элементы должны быть связаны по смыслу. Тогда и будет способ из обработчика к одному элементу работать с другим элементом. Например, у них должна быть родительская связь. Или один должен следовать за другим. Или во время создания обработчика нужно передать в него индекс нужного элемента и т.д. Способов много. А самый элегантный зависит от конкретной задачи.

Конкретно ваш код можно упростить, как минимум, до такого:

Код

let d = document, card = d.querySelectorAll(".card");
var current = null;

d.querySelectorAll(".btn").forEach(item => item.addEventListener("click", (e) => rotateCard(e)));

function rotateCard(e) {
	// Is there another way to find the item?
	current = e.target.parentElement.parentElement;
	current.style.transform = 'scale(2)';
}

Или можно учесть, что количество и порядок индексов одинаковый, и привязаться к нему. Тогда получится это:

Код

let d = document, card = d.querySelectorAll(".card");
var current = null;

d.querySelectorAll(".btn").forEach((item,j) => item.addEventListener("click", () => rotateCard(j)));

function rotateCard(idx) {
	// Is there another way to find the item?
	current = card[idx];
	current.style.transform = 'scale(2)';
}

Comments

[Minat0_]

Из-за того, что карточка содержит 2 кнопки(одну внешнюю(front), а другую внутреннюю(back)), то индексы будут разные из-за количества.

А упрощение моего способа нарушает анимацию переворота карточки из-за верстки.

Упрощённый вид моей вёрстки

<div class="card">
		<div class="front">
			<div class="card-main"></div>
			<div class="svg"><i>Тут кнопка переворота</i></div>
		</div>
		<div class="back">
			<div class="svg"></div>
			<div class="card-main"></div>
			<div class="servers">
				<div class="card-rotate"><i>Тут кнопка переворота</i></div>
			</div>
		</div>
	</div>

Вероятнее всего, самый просто способ – переписать вёрстку карточек по умному.

[Aetae]

Minato, если вам нужен .card - в данном коде для обоих кнопок он является родителем, а значит для обоих подойдёт .closest('.card'). Если вам нужен .card-main, то, самоочевидно, достаточно такого кода JS:

.closest('.card > .back, .card > .front').querySelector('.card-main')

или JQ:

.closest('.card > .back, .card > .front').find('.card-main:first')

.

[dollar]

Да, в этом случае closest идеально подходит.