|
зависимые клики по блокам, один активный блок
nastya97core,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.group {
background: #cccccc;
margin: 20px;
width: min-content;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.blocks {
display: flex;
}
p {
flex-basis: 100%
}
.block {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
background: blue;
color: white;
font-size: 24px;
text-align: center;
line-height: 50px;
}
.active {
background: red;
}
.enter {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
background: #999999;
margin: 5px
}
</style>
<script>
const array = [];
document.addEventListener("click", ({ target }) => {
const parent = target.closest(".group");
if (!parent) return;
const active = parent.querySelector(".active");
if (target.classList.contains("block")) {
target.classList.toggle("active");
if (active && target != active) active.classList.remove("active");
}
if (target.classList.contains("enter") && active) {
const name = parent.querySelector(".name").textContent;
const activeSize = active.textContent;
active.classList.remove("active");
array.push([name, activeSize])
show.textContent = JSON.stringify(array, "", "");
}
});
</script>
</head>
<body>
<pre id="show"></pre>
<div class="group">
<p class="name">Первый</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
<div class="group">
<p class="name">Второй</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
<div class="group">
<p class="name">Третий</p>
<div class="blocks">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
<div class="enter">Добавить</div>
</div>
</body>
</html>
Последний раз редактировалось рони, 03.05.2021 в 13:00.
|