Есть форма для составления заказа. Форма представляет собой "длинное полотенце" для удобства пользователя она была порезана на 5 шагов которые по очереди должны показыватся пользователю.
https://codepen.io/Jackkill/pen/JOJxVg
В форме есть линейка с отмеченными этапами и кнопки "next".
При нажатии на "next":
При нажатии на кнопку назад (сейчас это предыдущая точка на линейке):
С ползунком я разобрался а вот с убираниями активных классов на форме - нет( Никак не могу понять почему код не работает Нажимаю на кнопку в первой форме:
//-- click "nextBtn" to show second page
$('.nextBtn.second').click(function(e) {
e.preventDefault();
//-- draw green circle on 2
$('.steps .secondStep').addClass( "active" );
//-- draw green line 50%
progressBar();
//-- show second form
$('.yourPartnerInfo__Page').addClass( "active" );
//-- hide first form
$('.personalInfo__Page').removeClass( "active" );
});
//-- click "nextBtn" to show second page end
Все хорошо результат видно, форма переключилась и ползунок подвинулся.
Двигаемся назад - клик по первому кружечку
//-- click first Green Circle -> to return back on first page
$('.firstStep.active a').click(function(e) {
e.preventDefault();
//-- for all steps -> count to 5 and remove green circles if exist
for (i = 2; i < 6; i++) {
Array.from(document.querySelectorAll('.steps > li:nth-child('+ i +')')).forEach(e => e.classList.remove('active'));
console.log('remove active from'+i);
}
//-- remove green line to 25%
progressBar();
//-- hide all active pages
Array.from(document.querySelectorAll('.mainForm ol > li')).forEach(e => e.classList.remove('active'));
//-- show first active page
$('.personalInfo__Page').addClass( "active" );
});//-- click first Green Circle -> to return back on first page end
Нормально второй погас и форма нужная показана.
Кликаем по первой форме и сразу по второй, чтобы попасть на третюю страницу формы.
//-- click "nextBtn" to show third page
$('.nextBtn.third').click(function(e) {
e.preventDefault();
//-- draw green circle on 3
$('.steps .thirdStep').addClass( "active" );
//-- draw green line to 75%
progressBar();
//-- show third form
$('.contactsInfo__Page').addClass( "active" );
//-- hide second form
$('.yourPartnerInfo__Page').removeClass( "active" );
});//-- click "nextBtn" to show third page end
форма показана, кружечек стоит и полунок подвинулся вперед.
А теперь самое забавное - нажимаем на второй кружечек чтобы пройти назад и ничего не выходит.
//-- click on second green circle
$('.secondStep.active a').click(function(e) {
e.preventDefault();
console.log('i am second click');
//-- for all steps -> count to 5 and remove green circles if exist
for (i = 3; i < 6; i++) {
Array.from(document.querySelectorAll('.steps > li:nth-child('+ i +')')).forEach(e => e.classList.remove('active'));
console.log('remove active from'+i);
}
//-- draw green line to 50%
progressBar();
//-- hide all active pages
Array.from(document.querySelectorAll('.mainForm ol > li')).forEach(e => e.classList.remove('active'));
//-- show second active page
$('.yourPartnerInfo__Page').addClass( "active" );
});
Лог не выводится console.log('i am second click'); а следовательно и клик не отрабатывает...
Заранее прошу извинения за код, я только учусь и ничего пока не оптимизировал.
Клик на первой точке отрабатывает всегда, на втором, третем, четвертом шаге. Подскажите кто может - почему не отрабатывает клик возврата на вторую форму?
Когда выполняется навешивание обработчика
$('.secondStep.active a').click(function(e) { ...
у элемента с классом secondStep
еще не установлен класс active
, поэтому селектор .secondStep.active
ничего не находит и ничего не делает. Используйте делегирование:
$(document).on('click', '.secondStep.active a', function(e) { ...
http://api.jquery.com/on/
Клик на первой точке отрабатывает всегда
Потому что, когда грузится страница и выполняется Ваш код, у элемента с классом firstStep
уже установлен класс active
, и код
$('.firstStep.active a').click(function(e) { ...
находит элемент '.firstStep.active a'
и назначает ему обработчик события click
.
Фрилансер или Digital-агентство - Как сделать правильный выбор?
здравствуйте, на сайте перестали работать регистрация и вход, в консоли выходит такая ошибка:
С помощью чего лучше всего создать подобный скрипт? Какой фреймворк посоветуете
Возникла проблема передачи данных и файлов через ajax, по отдельности все работает, а вот вместе не хочет, подскажите пожалуйста как это обойти,...