<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="item">
<button class="btn">Push</button>
</div>
<div class="item">
<button class="btn">Push</button>
</div>
<div class="item">
<button class="btn">Push</button>
</div>
</div>
</body>
</html>.box {
display: flex;
}
.item {
height: 300px;
width: 200px;
background: #eee;
margin-right: 1rem;
position: relative;
}
.item.active {
background: blue;
}
.btn {
position: absolute;
bottom: 0;
width: 100%;
}function funcOne() {
let item = document.querySelectorAll('.item');
let btn = document.querySelector('.btn');
for (let i = 0; i < item.length; i++) {
item[i].addEventListener('click', function() {
item[i].classList.add('active');
});
}
}
funcOne();
const container = document.querySelector('.box');
container.addEventListener("click", ({ target: t }) => {
if(t.classList.contains("btn")) {
const card = t.closest(".item");
card && card.classList.add("active");
}
})document.querySelectorAll('.item').forEach(v => {
v.querySelector(".btn").addEventListener('click', () => {
v.classList.add('active');
});
});