Перебор массива
Здравствуйте.
Нужно по клику добавить класс к выбранному элементу и удалить во всех остальных, вопрос в том, как это сделать не используя два (forEach) перебора массива? Возможно можно ограничится одним перебором?
<section class="skills">
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon"></i>
<div class="skills-item__text">
some text
</div>
</div>
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon"></i>
<div class="skills-item__text">
some text
</div>
</div>
<div class="skills-item">
<i class="fa-brands fa-js skills-item__icon"></i>
<div class="skills-item__text">
some text
</div>
</div>
</section>
skillsIcon.forEach(item => {
item.addEventListener('click', () => {
skillsText.forEach((items, i) => {
items.classList.remove('skills-item__text_active');
skillsIcon[i].classList.remove('skills-item__icon_active');
});
item.classList.add('skills-item__icon_active');
item.nextElementSibling.classList.add('skills-item__text_active');
});
});
|
TheSanches, кто такой skillsIcon?
|
Цитата:
<!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>
|
Цитата:
|
Спасибо!
|
| Часовой пояс GMT +3, время: 08:21. |