Question

js原生：需求：五个div,点击一个div显示背景颜色，点击下一个div，显示背景颜色？

js原生：需求：五个div,点击一个div显示背景颜色，点击下一个div，显示背景颜色。注意：点击下一个div同时前面的背景颜色隐藏，依次循环。

Answer 1

<style>
.cell { display: flex; }
.col { padding: 1em; transition: all ease-in-out .2s; flex: 1; text-align: center; background-color: #eee; margin: .2em; }
.bg { background-color: #f90; color: #fff; }
</style>

<div class="cell">
<div class="col">c1</div>
<div class="col">c2</div>
<div class="col">c3</div>
<div class="col">c4</div>
<div class="col">c5</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
var cols = document.querySelector('.cell').querySelectorAll('.col');
function changeBackground(target) {
for (var i = 0; i < cols.length; i++) {
cols[i].classList.remove('bg');
}
target.classList.add('bg');
}
for (var i = 0; i < cols.length; i++) {
cols[i].addEventListener('click', function(e) {
changeBackground(e.currentTarget);
});
}
});
</script>

追问

大佬，如果改了需求，同样我想实现 五个div 每个都有一个子元素和一个孙元素，点击一个div，显示孙元素的背景颜色。点击下一个div同时前面的孙元素的背景颜色隐藏，依次循环。