0

Подскажите пожалуйста как сделать так, что-бы если у 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>

4
  • Я не очень понял в чём именно проблема. Вот же вы сами написали как это определять currentElement.classList.contains('_active') и как добавлять класс e.classList.add('_active'). Просто примените к нужным элементам и всё... Или это не ваш код и вы не понимаете что там написано?))
    – EzioMercer
    20 июн 2022 в 7:58
  • я то сделал так что-бы добавлялся _active, но почему-то при клике на 1 блок, _active применяется и к 1-му и последнему item-circle__row, а нужно только к тому у кого у item-circle-block__items есть класс _active
    – tiptop88
    20 июн 2022 в 10:16
  • Вам такой селектор нужен .item-circle-block__items.active?
    – EzioMercer
    20 июн 2022 в 10:58
  • смотрите сейчас попонятней объясню. Если .item-circle-block__items._active, то к item-circle__row добавляется класс _active. Я такое в своем коде здесь реализовал, но отображается оно не корректно, применяется не к одному блоку, а ко всем
    – tiptop88
    20 июн 2022 в 11:07

1 ответ 1

1

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

  • Найти нужные вам блоки таким селектором .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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.