Подскажите пожалуйста как сделать так, что-бы если у 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>
currentElement.classList.contains('_active')
и как добавлять классe.classList.add('_active')
. Просто примените к нужным элементам и всё... Или это не ваш код и вы не понимаете что там написано?)).item-circle-block__items.active
?