Нужно при клике на '.item__dscr' добавлялся класс '.item__dscr-active' и '.rating' добавлялся класс '.active'?

Question

[Евгений Block]

есть три карточки с одинаковыми элементами. нужно при клике на '.item__dscr' добавлялся класс '.item__dscr-active' и '.rating' добавлялся класс '.active' в той карточке в которой был клик.

добавление класса '.item__dscr-active' к .item__dscr работает как нужно,
а вот ' '.active к .rating' добавляет во всех карточках

<div class="popular__wrapper_items">
				
					<div class="item__wrapper">
					
						<div class="item__on">
							<div class="rating">
								4.9
							</div>
							<img src="img/popular/lake.png" class="item__on_img" alt="lake">
						</div>
						<div class="item__dscr">
							<div class="price">
								<div class="price__title">
									Озеро возле гор <br>
									<span>
										романтическое приключение
									</span>	
								</div>								
								<div class="price__price">
									480 $
								</div>												
							</div>
							<div class="dscr">						
								Его корни уходят в один фрагмент  классической латыни 45 года н.э., то есть более двух
								тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат
								Вирджиния, взял одно из самыхстранных слов в Lorem Ipsum, "consectetur"и занялся его
								поисками в классической латинской литературе.						
							</div>
							<div class="hover_btn">
								<button class="btn price__btn">
									Программа тура
								</button>
							</div>
						</div>
					</div>	

							
				</div>

const dscrs = document.querySelectorAll('.item__dscr');

const ratings = document.querySelectorAll('.rating');


dscrs.forEach((dscr) => {
        dscr.addEventListener('click', function(e){
            dscr.classList.toggle('item__dscr-active')
            let active = dscr.classList.contains('item__dscr-active')
         
            if(active)
              ratings.forEach(rating => {
            rating.classList.toggle('active') 
            console.log('pipec1');  
           else
           ratings.forEach(rating => {
            rating.classList.remove('active')
          
           })
          
})})

Answer 1

[Сергей delphinpro]

const dscrs = document.querySelectorAll('.item__wrapper');
const ratings = document.querySelectorAll('.rating');

dscrs.forEach((wrapper) => {
        let dsrc = wrapper.querySelector('.item__dscr');
        let rating = wrapper.querySelector('.rating');

        dscr.addEventListener('click', function(e) {
            dscr.classList.toggle('item__dscr-active');
            let active = dscr.classList.contains('item__dscr-active');
         
            ratings.forEach(r => r.classList.remove('active'));
            rating.classList.toggle('active', active);
        })
})

Comments

[Евгений Block]

с этим кодом получается с '.rating' снимается класс 'active' при клике на '.rating' в другой карточки, соответственно на третий карточке включает)

[Сергей delphinpro]

Евгений block, я просто вашу логику не доконца понял.
Если другие карточки трогать вообще не нужно, только ту, по которой кликнули, то просто убрать строку

ratings.forEach(r => r.classList.remove('active'));

[Сергей delphinpro]

да и вообще сократить можно

dscr.addEventListener('click', function(e) {
            dscr.classList.toggle('item__dscr-active');
            rating.classList.toggle('active');
})

[Евгений Block]

Сергей delphinpro, да! Спасибо вам!!! 2 недели сидел сам пыхтел))) после основной работы времени мало остаётся.

пытаю победить JS, но пока он меня)))