Как изменить класс элемента при клике на другой элемент c помощью js?

Question

[jugger1]

Здравствуйте.

Суть в том, что мне нужно изменить класс в определенном блоке, но у меня меняется во всех блоках.

<div class="main">
		<div class="but">кнопка</div>
		<p class="text">изменить текст</p>
	</div>
	<div class="main">
		<div class="but">кнопка</div>
		<p class="text">изменить текст</p>
	</div>
	<div class="main">
		<div class="but">кнопка</div>
		<p class="text">изменить текст</p>
	</div>
	<div class="main">
		<div class="but">кнопка</div>
		<p class="text">изменить текст</p>
	</div>

Как правильно написать jq код, чтобы при клике на класс "but" изменялся класс "text" только в одном блоке?

Заранее спасибо.

Answer 1

[Andrey Suha]

let mains = [ ...document.querySelectorAll(".main") ];
mains.forEach(main => {
    let btn = main.querySelector(".but"),
         text = main.querySelector(".text");
     btn.addEventListener("click", () => text.classList.toggle("some-class"));
});