|
Сообщение от TheSanches
|
|
как это сделать не используя два (forEach) перебора массива?
|
Вариант вообще без циклов...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
.active {
color: red;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const oc = document.querySelector('.skills')
oc.addEventListener('click', e => {
if (e.target.tagName !== 'I') return
const o = oc.querySelector('.active')
if (o) o.classList.remove('active')
e.target.parentNode.querySelector('.skills-item__text').classList.add('active')
})
})
</script>
</head>
<body>
<section class="skills">
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon">I 0</i>
<div class="skills-item__text">
some text 0
</div>
</div>
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon">I 1</i>
<div class="skills-item__text">
some text 1
</div>
</div>
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon">I 2</i>
<div class="skills-item__text">
some text 2
</div>
</div>
</section>
</body>
</html>