Найти родителя в JS
У меня есть такой код. Он должен работать по принципу когда кликаешь на подробнее открываются блоки у которых общих родитель. И я могу это сделать с одним блоком, но нужно что бы были классы и они находили общего родителя и применялись внутри родителя. Я это понимаю но не могу правильно написать синтаксис. То есть кликнул на подробнее он открыл блоки в который общий родитель
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wraper {
}
.blok_1 {
font-size: 18px;
}
.blok_2 {
font-size: 18px;
}
.blok_2_1 {
}
.blok_2_2 {
color: tomato;
cursor: pointer;
text-decoration: underline;
}
.blok_3 {
font-size: 14px;
}
.blok_4 {
font-size: 14px;
}
.vlya_svoih{
display: none;
}
</style>
</head>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<br><br><br><br>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<body>
<script>
let podrobnee = document.querySelector(".blok_2_2");
let blok_3 = document.querySelector(".blok_3");
let blok_4 = document.querySelector(".blok_4");
let podrobnee_fun = () => {
blok_3.classList.toggle('vlya_svoih');
blok_4.classList.toggle('vlya_svoih');
}
podrobnee.addEventListener("click", podrobnee_fun);
</script>
</body>
</html>
|
Даже я логику понять не могу. Получатся если у блоков общий родитель то применить к ним, но как это написать
|
Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wraper {}
.blok_1 {
font-size: 18px;
}
.blok_2 {
font-size: 18px;
}
.blok_2_1 {}
.blok_2_2 {
color: tomato;
cursor: pointer;
text-decoration: underline;
}
.blok_3 {
font-size: 14px;
}
.blok_4 {
font-size: 14px;
}
.vlya_svoih {
display: none;
}
</style>
</head>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<br><br><br><br>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<body>
<script>
let podrobnee_fun = ({
target
}) => {
if (target = target.closest('.blok_2_2')) {
target = target.closest('.wraper')
target.querySelector('.blok_3').classList.toggle('vlya_svoih');
target.querySelector('.blok_4').classList.toggle('vlya_svoih');
}
}
document.addEventListener("click", podrobnee_fun);
</script>
</body>
</html>
|
рони,
Вот так просто, а я читал и искал что нужно найти родителя .parentNode и как то нужно применить |
рони,
Спасибо |
Сергей Ракипов,
менять класс hide надо только у .wraper, blok_3 и blok_4 заменить на общий для них класс. |
| Часовой пояс GMT +3, время: 22:44. |