Сергей Ракипов,
да другой код, другой подход. некий объект например, и отображать его "текущее дерево состояний" |
Вот такая структура будет нормальная, тут просто структура верстки.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-size: 1.2rem;
font-family: 'Courier New', Courier, monospace;
font-weight: 900;
}
.calculator {
max-width: 320px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 320px;
margin: 20px auto 20px;
color: #F288B4;
}
.level_one {
color: #946FF2;
padding: 10px 0px 10px 10px;
margin: 0px 0px 20px 0px;
border-left: solid 1px #946FF2;
}
.sum_all_level_one {
display: block;
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #F47B5E;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #F47B5E;
}
.num_level_two {}
.level_three {
color: #F2C463;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #F2C463;
}
</style>
</head>
<body>
<div class="total_amount">
16 000
</div>
<div class="calculator">
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
2 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="number">
<span class="num_level_two sum_all_level_two">
6 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
calculator.addEventListener('change', function ({
target
}) {
console.log(target);
console.log(target.className);
if(target.classList.contains("level__1")){
console.log("Клик level_one");
let levelOneChildren = target.querySelectorAll(".level_two")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelOneChildren)
}
})
</script>
</body>
</html>
|
И как при клике на чекбокс вывести имена детей
|
Сергей Ракипов,
let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two")
|
рони,
А почему так?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.calculator {
max-width: 110px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 220px;
margin: 20px auto 20px;
color: #946FF2;
}
.level_one {
color: #2189FF;
padding: 10px 0px 10px 10px;
margin: 0px 0px 10px 0px;
border-left: solid 1px #2189FF;
}
.sum_all_level_one {
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #1D76DB;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #1D76DB;
}
.num_level_two {}
.level_three {
color: #619DE1;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #619DE1;
}
</style>
</head>
<body>
<div class="total_amount">
21 000
</div>
<div class="calculator">
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
5 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="sum_all_level_one">
<span class="num_level_one">
13 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="number">
<span class="num_level_two sum_all_level_two">
9 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_two">
1 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_two">
7 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
calculator.addEventListener('change', function ({
target
}) {
console.log(target.className);
if(target.classList.contains("level__1")){
console.log("Click: level_1");
let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two label.number")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelOneChildren);
}
if(target.classList.contains("level__2")){
console.log("Click: level_2");
let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three label.number")
// let levelOneChildren = levelOne.childNodes
// let levelOneChildren = levelOne.children
console.log(levelTwoChildren);
}
})
</script>
</body>
</html>
При клике level__1 где 13 000 я получаю 4 детей а по идее мне нужно 2 детей level_two label.number где 4 000 и 9 000 а по итогу получаю 4 детей где 4 000 9 000 1 500 7 500 |
Потому, что querySelectorAll получает не детей, а всех потомков, которые вложены в элемент.
|
Цитата:
|
Сергей Ракипов,
идти по кратчайшему к нужным элементам! let levelOneChildren = target.closest('.level_one').querySelectorAll(".le vel_two > label.number") |
Цитата:
|
Вот отмечание чек боксов работает так как нужно, но там ошибка и я ее не понимаю
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
background-color: #27405C;
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
label{
display: flex;
align-items: center;
justify-content: space-between;
}
.calculator {
max-width: 110px;
margin: 0px auto 0px;
display: flex;
flex-direction: column;
}
.total_amount {
max-width: 220px;
margin: 20px auto 20px;
color: #946FF2;
}
.level_one {
color: #2189FF;
padding: 10px 0px 10px 10px;
margin: 0px 0px 10px 0px;
border-left: solid 1px #2189FF;
}
.sum_all_level_one {
padding: 0px 0px 2px 0px;
}
.num_level_one {}
.level_two {
color: #1D76DB;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #1D76DB;
}
.num_level_two {}
.level_three {
color: #619DE1;
display: flex;
flex-direction: column;
padding: 0px 0px 0px 10px;
border-left: solid 1px #619DE1;
}
</style>
</head>
<body>
<div class="total_amount">
21 000
</div>
<div class="calculator">
<div class="level_one">
<label class="all__1 sum_all_level_one">
<span class="num_level_one">
8 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
3 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<label class="number">
<span class="num_level_two">
5 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
</div>
<div class="level_one">
<label class="all__1 sum_all_level_one">
<span class="num_level_one">
13 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__1">
</label>
<div class="level_two">
<label class="number">
<span class="num_level_two">
4 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
</div>
<div class="level_two">
<label class="all__2 number">
<span class="num_level_two sum_all_level_two">
9 000
</span>
<input type="checkbox" checked="checked" class="checkbox level__2">
</label>
<div class="level_three">
<label class="number">
<span class="num_level_three">
1 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
<label class="number">
<span class="num_level_three">
7 500
</span>
<input type="checkbox" checked="checked" class="checkbox level__3">
</label>
</div>
</div>
</div>
</div>
<script>
const totalAmount = document.querySelector('.total_amount');
const calculator = document.querySelector('.calculator');
const levelOne = document.querySelector('.level_one');
const levelTwo = document.querySelector('.level_two');
const levelThree = document.querySelector('.level_three');
calculator.addEventListener('change', function ({
target
}) {
let input = target.closest('input');
console.log(input)
if (input) {
let all__1 = target.closest('.all__1 input');
if (all__1) target.closest('.level_one').querySelectorAll('.number input').forEach(input => (input.checked = all__1.checked));
else if (target.checked) target.closest('.level_one').querySelector('.all__1 input').checked = true;
else target.closest('.level_one').querySelector('.all__1 input').checked = target.closest('.level_one').querySelectorAll('.number :checked');
}
if (input) {
let all__2 = target.closest('.all__2 input');
if (all__2) target.closest('.level_two').querySelectorAll('.number input').forEach(input => (input.checked = all__2.checked));
else if (target.checked) target.closest('.level_two').querySelector('.all__2 input').checked = true;
else target.closest('.level_two').querySelector('.all__2 input').checked = target.closest('.level_two').querySelectorAll('.number :checked');
}
if(target.classList.contains("level__1")){
console.log("Click: level_1");
let levelOneChildren = target.closest('.level_one').querySelectorAll(".level_two .num_level_two")
console.log(levelOneChildren);
}
if(target.classList.contains("level__2")){
console.log("Click: level_2");
let levelTwoChildren = target.closest('.level_two').querySelectorAll(".level_three .num_level_three")
console.log(levelTwoChildren);
}
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:10. |