Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Какую функцию можно использовать для перелистывания? (https://javascript.ru/forum/misc/80822-kakuyu-funkciyu-mozhno-ispolzovat-dlya-perelistyvaniya.html)

Nice 08.08.2020 13:39

Какую функцию можно использовать для перелистывания?
 
У меня стоит задача сделать квиз (опросник). Сам опросник свёрстан, но сейчас все вопросы выводятся в div блоке #quiz в столбик друг под другом. Мне же необходимо, чтобы вопросы пролистывались по одному по нажатию на кнопку "Далее". Каждый вопрос завёрстан в отдельной <form></form> с уникальным id

По сути мне надо на каждый текущий вопрос применять свойства
$('#quiz form').addClass('active');
$('#quiz form').fadeIn();

А ко всем остальным
$('#quiz form').removeClass('active');
$('#quiz form').fadeOut();


Но какую функцию я могу использовать для того, чтобы отличить текущий объект (form) от нетекущего, чтобы применить эти действия? Необходимо использовать for, forEach или что-то другое?

рони 08.08.2020 13:54

Цитата:

Сообщение от Nice
чтобы вопросы пролистывались по одному по нажатию на кнопку "Далее".

https://javascript.ru/forum/misc/762...tml#post500647

Nice 08.08.2020 14:10

Цитата:

Сообщение от рони (Сообщение 527766)

по-моему, это немного другое. У меня не тесты, просто сбор информации и отправка на почту. В примере инфо как я поняла подгружается из массива js, а у меня уже свёрстаны элементы в html. Хотелось бы просто задать условие, чтобы была возможность повесить класс active на активный элемент

Nice 08.08.2020 15:52

Скрипя мозгами обеспечила перелистывание таким вод кодом :)
jQuery('#quiz').ready(function($) { 
	$('#quiz form').removeClass('active');
	$('#quiz form').fadeOut();	
	$('#quiz form#step-1').addClass('active');
	$('#quiz form#step-1').fadeIn();	
	var counter = -1;
	$('#quiz input[type="button"]').click(function() { 
		$('#quiz form').removeClass('active');
		$('#quiz form').fadeOut();
		counter++;
 		$('#quiz form').eq(counter).next().addClass('active');
		$('#quiz form').eq(counter).next().fadeIn();			
	});
});


Часовой пояс GMT +3, время: 03:12.