Если блок имеет класс, то к другому тоже добавляется класс? javascript

Подскажите пожалуйста как сделать так, что-бы если у item-circle-block__items есть класс _active, к item-circle__row тоже добавляется класс _active. Спасибо

https://jsfiddle.net/na03ukem/45/

let models = document.querySelectorAll('.item-circle__scene')

if (models.length > 0) {
  for (var index = 0; index < models.length; index++) {
const model = models[index];
model.addEventListener('click', (e) => {

  let modelSectors = document.querySelectorAll('.item-circle-block__items')
  let modelsRow = document.querySelectorAll('.item-circle__row')
  let sectorNumb = +e.target.parentNode.getAttribute('data-id')

  if (sectorNumb == 0) return false;

  /** 1. Получаем текущий элемент */
  const currentElement = modelSectors[sectorNumb - 1];

  if (modelsRow.length > 0) {
    modelsRow.forEach(function(e) {
      modelSectors.forEach((sector) => {
        /** 2. пропускаем в этерации текущий элемент */
        if (currentElement !== sector) {
          sector.classList.remove('_active');
          e.classList.remove('_active')
        }
      })
    });
  };

  /** 3. по условию меняем класс */
  if (modelsRow.length > 0) {
    modelsRow.forEach(function(e) {
      if (currentElement.classList.contains('_active')) {
        currentElement.classList.remove('_active')
        e.classList.remove('_active')
      } else {
        currentElement.classList.add('_active')
        e.classList.add('_active')
      }
    });
  };
})
  }
}


let radius = 180;
let countCircle = -1;

function generateLetters(selector, text, colorCircle) {
  const letters = text.split('');
  const step = 360 / letters.length;
  countCircle = -1; // Сброс счетчика слов
  letters.forEach((l, i) => {
const span = document.createElement('span');
changeColor(l, span, colorCircle);
const deg = step * i;
span.style.transform = transform(deg, radius);
selector.append(span);
  });
}

function changeColor(l, span, colorCircle) {
  if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
  span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
  span.style.color = colorCircle[countCircle]; //Присваиваем цвет
}

function transform(deg, radius = 180) {
  return `rotateY(${deg}deg) translateZ(${radius}px)`;
}
let circle_1 = document.querySelector('.circle_1');
let content_1 = 'ТекстТекстТекстТекст';
let color_1 = ['#ccba96', '#161616', '#ccba96', '#161616'];
generateLetters(circle_1, content_1, color_1);

let circle_2 = document.querySelector('.circle_2');
let content_2 = 'ТекстТекстТекстТекст';
let color_2 = ['#ccba96', '#161616', '#ccba96', '#161616'];
generateLetters(circle_2, content_2, color_2);

let circle_3 = document.querySelector('.circle_3');
let content_3 = 'ТекстТекстТекстТекст';
let color_3 = ['#ccba96', '#161616', '#ccba96', '#161616'];
generateLetters(circle_3, content_3, color_3);
.block-2 {
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-circle__row {
  position: relative;
}

.item-circle__row._active {
  margin: 0px 0px 150px 0px;
}

.item-circle__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.item-circle__scene {
  position: relative;
  perspective: 800px;
  perspective-origin: 0px -80px;
  transform-style: preserve-3d;
  padding: 0px 0px 8px 0px;
}

.item-circle__circle {
  cursor: pointer;
  padding-bottom: 60px;
  transform-style: preserve-3d;
  animation: rotate 35s linear infinite;
}

.item-circle__circle span {
  font-weight: bold;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #161616;
  -webkit-text-stroke: 1px #ccba96;
  padding: 10px 0px 10px 0px;
  font-size: 28px;
  min-width: 60px;
  perspective-origin: center;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-circle__circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 22, 22, 0.5);
  transform: translateZ(-5px);
}

.sector-two__description {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-circle-block__items {
  opacity: 0;
}

.item-circle-block__items._active {
  width: 300px;
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #161616;
  margin: 30px 0px 10px 0px;
  position: absolute;
  opacity: 1;
}

@keyframes rotate {
  0% {
transform: rotateY(0deg);
  }

  100% {
transform: rotateY(1turn);
  }
}

.item-circle__row:nth-child(1) .item-circle__content {
  z-index: 14;
}

.item-circle__row:nth-child(2) .item-circle__content {
  z-index: 13;
}

.item-circle__row:nth-child(3) .item-circle__content {
  z-index: 12;
}
<div class="block-2">
   <div class="sector-two__description description-sector-two">
 <div class="item-circle__row">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="1" class="item-circle__circle circle_1"></div>
     </div>
   </div>
   <div class="item-circle-block__items">
     какой-то текст
   </div>
 </div>
 <div class="item-circle__row">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="2" class="item-circle__circle circle_2"></div>
     </div>
   </div>
   <div class="item-circle-block__items">
     какой-то текст
   </div>
 </div>

 <div class="item-circle__row">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="3" class="item-circle__circle circle_3"></div>
     </div>
   </div>
   <div class="item-circle-block__items">
     какой-то текст
   </div>
 </div>
   </div>
 </div>


Ответы (1 шт):

Автор решения: EzioMercer

Если я правильно понял, то вам надо:

  • Найти нужные вам блоки таким селектором .item-circle__row .item-circle-block__items.active
  • У нужных блоков взять родителя

Код:

document.querySelectorAll('.item-circle__row .item-circle-block__items.active').forEach(row => {
  console.log(row.parentNode.className);
})
<div class="block-2">
   <div class="sector-two__description description-sector-two">
 <div class="item-circle__row 1">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="1" class="item-circle__circle circle_1"></div>
     </div>
   </div>
   <div class="item-circle-block__items">
     какой-то текст
   </div>
 </div>
 <div class="item-circle__row 2">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="2" class="item-circle__circle circle_2"></div>
     </div>
   </div>
   <div class="item-circle-block__items active">
     какой-то текст
   </div>
 </div>

 <div class="item-circle__row 3">
   <div class="item-circle__content">
     <div class="item-circle__scene">
       <div data-id="3" class="item-circle__circle circle_3"></div>
     </div>
   </div>
   <div class="item-circle-block__items">
     какой-то текст
   </div>
 </div>
   </div>
 </div>

→ Ссылка