Форум

TheSanches · #1 (**permalink**) 04.07.2022, 12:02

Здравствуйте.
Нужно по клику добавить класс к выбранному элементу и удалить во всех остальных, вопрос в том, как это сделать не используя два (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');
      });
    });

ksa · #2 (**permalink**) 04.07.2022, 14:29

TheSanches, кто такой skillsIcon?

ksa · #3 (**permalink**) 04.07.2022, 15:09

Сообщение от 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>

TheSanches · #4 (**permalink**) 05.07.2022, 14:08

Сообщение от ksa

TheSanches, кто такой skillsIcon?

TheSanches · #5 (**permalink**) 05.07.2022, 14:08

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript