Как прописать проверку активен ли элемент с помощью id?

Question

[Kardamon_mchl]

Доброго дня, прописал на сайте пошаговую форму оформления заказа, один шаг - один блок, каждому шагу задал id step-1, step-2 и т.д. Логика следующая: в каждом шаге есть своя кнопка навигации(далее, назад) при клике на которую, выполняются действия с родителями(т.е. блоком шага) добавить/убрать класс active(отобразить/скрыть). И вот мне нужно прописать функцию проверки, когда у третьего шага есть класс active:

$(function () {
	let step3 = document.getElementById('step-3')
	$(step3).on('change', function () {
		if ($(this).hasClass('active')) {
			console.log('active')
		};
	});
});

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

Comments

[Вадим]

А что из себя представляет в HTMl step-3?
Вы уверены что там будет событие change?

[cssfish]

так вы определитесь, на JS или JQUERY пишите?
а событие change у простого блока (я так понял это див) тоже нет.
код в студию, вобщем

[Kardamon_mchl]

Вадим,
Нет, не уверен, поэтому и написал здесь за советом
Сам step-3:

<div id="step-3" class="order__form-step">
	<p class="order__form-step-tittle"><span class="order__form-step-num">3</span> Оплата</p>
	<div class="order__form-content">
		<div class="order__form-item">
			<p class="order__form-tittle">Способ оплати</p>
			<label class="radio">
				<input required name="payment" type="radio" class="radio__input js-input-radio">
				<span class="radio__fake"></span>
				<span class="radio__text">Наличными при получении</span>
			</label>
			<label class="radio">
				<input name="payment" type="radio" class="radio__input js-input-radio">
				<span class="radio__fake"></span>
				<span class="radio__text">Оплатить картой сейчас</span>
			</label>
			<label class="radio">
				<input name="payment" type="radio" class="radio__input js-input-radio">
				<span class="radio__fake"></span>
				<span class="radio__text">PrivatPay</span>
			</label>
			<label class="radio">
				<input name="payment" type="radio" class="radio__input js-input-radio">
				<span class="radio__fake"></span>
				<span class="radio__text">Расчетный счет</span>
			</label>
		</div>
	</div>
	<input type="button" value="К предыдущему шагу" class="order__form-btn prev-button">
</div>

[Kardamon_mchl]

cssfish, только обучаюсь в этой сфере, так что пишу безобразно(

[cssfish]

Kardamon_mchl, вся эта портянка не нужна для вопроса, упрощайте код (для локализации проблемы):

<div id="step-3">
<input type="button" value="К предыдущему шагу" class="order__form-btn prev-button">
</div>

А теперь к вопросу

"И вот мне нужно прописать функцию проверки, когда у третьего шага есть класс active"

Проверки чего? В какой момент? При нажати на кнопку?

Ну и если пишите на JS чистом то там hasClassнет

[Kardamon_mchl]

cssfish, пишу я смешивая js и jq, знаю что это неправильно, буду исправлять позже. А по вопросу, ваш комментарий и можно считать ответом, я прописал проверку при клике на кнопку на следующий шаг и все заработало как нужно. Спасибо

[cssfish]

Kardamon_mchl, а чего смешивать нельзя? можно.

Answer 1

[Nik Faraday]

Вам нужно такую проверку

f ($(this).hasClass('active')) {
console.log('active')
};

делать после какого-то действия. jQuery не имеет возможности отслеживать изменения классов. Почитайте тут.