Как сделать правильный цикл?

Question

[Александр Калелов]

нужно сделать так чтобы ответ выбранный по клику выполнял условие и каждый раз по циклу было (#answer1, #q2, .error1 и так по i++).
вообщем сделать это все циклом в два столбика.

var x =0;

	$(document).ready(function(){
	 $("#q2, #q3, #q4, #q5").css("display", "none");
	 $(".btn").hide();
	 $("#answer1").on("click",function(){
	 	$("#q2").fadeIn(1500);
	 	$("#answer1").css("background","green");
          for(i=0;i<3;i++) {
    $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
  	}
	 x+= 100;
	 $(".error1").css("display","none");
	})

	 $(".error1").on("click",function(){
	 	$("#q2").fadeIn(1500);
	 	$("#answer1").css("background","green");
	 	 for(i=0;i<3;i++) {
    $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
  	}
	 	$(".error1").css("background","red");
})

})
// ...............................................................
// 	 $("#answer2").on("click",function(){
// 	 	$("#q3").fadeIn(1500);
// 	 	$("#answer2 a").css("background","green");
// 	 	          for(i=0;i<3;i++) {
//     $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 		x+= 100;
// 		$(".error2").css("display","none");
// 	 })
// 	 $(".error2").on("click",function(){
// 	 	$("#q3").fadeIn(1500);
// 	 	$("#answer2 a").css("background","green");
// 	 	for(i=0;i<3;i++) {
//     $("#answer2").fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 	 	$(this).css("background","red");
// 	 })
// //....................................................................
// 	 	 $("#answer3").on("click",function(){
// 	 	$("#q4").fadeIn(1500);
// 	 	$("#answer3 a").css("background","green");
// 	 	          for(i=0;i<3;i++) {
//     $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 		x+= 100;
// 		$(".error3").css("display","none");
// 	 })
// 	 $(".error3").on("click",function(){
// 	 	$("#q4").fadeIn(1500);
// 	 	$("#answer3 a").css("background","green");
// 	 	for(i=0;i<3;i++) {
//     $("#answer3").fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 	 	$(this).css("background","red");
// 	 })
// //....................................................................
// 	 	 $("#answer4").on("click",function(){
// 	 	$("#q5").fadeIn(1500);
// 	 	$("#answer4 a").css("background","green");
// 	 	          for(i=0;i<3;i++) {
//     $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 		x+= 100;
// 		$(".error4").css("display","none");
// 	 })
// 	 $(".error4").on("click",function(){
// 	 	$("#q5").fadeIn(1500);
// 	 	$("#answer4 a").css("background","green");
// 	 	for(i=0;i<3;i++) {
//     $("#answer4").fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 	 	$(this).css("background","red");
// 	 })
// //....................................................................
// 	 	 $("#answer5").on("click",function(){
// 	 	$("#answer5 a").css("background","green");
// 	 	          for(i=0;i<3;i++) {
//     $(this).fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 	 	x+= 100;
// 	 	$(".error5").css("display","none");
// 	 	$(".btn").show("slow");
// 	 	document.getElementById('ball').innerHTML = 'Вы заработали '+x+' очков';
// 	 })
// 	 $(".error5").on("click",function(){
// 	 	$("#answer5 a").css("background","green");
// 	 	for(i=0;i<3;i++) {
//     $("#answer5").fadeTo('700', 0.3).fadeTo('700', 1.0);
//   	}
// 	 	$(this).css("background","red");
// 	 	$(".btn").show("slow");
// 	 	document.getElementById('ball').innerHTML = 'Вы заработали '+x+' очков';
// 	 })

Comments

[Roman]

Цикл по итерации это что за зверь?

Answer 1

[Alexej Simakov]

у вас "#answer1" ".error1" "#q1" все - строки, создавайте их конкатенацией с индексом, как-то так "#answer"+i.toString(); и.т.д а потом вставляйте в скобки.

Comments

[Александр Калелов]

будет так работать через цикл for?

[Alexej Simakov]

Александр Калелов,

for (i=0; i<10; i++){
  a = "#answer"+i.toString()
  e = ".error"+i.toString()
  q = "#q"+i.toString()
  console.log(a, e, q);
}

output

#answer0 .error0 #q0
#answer1 .error1 #q1
#answer2 .error2 #q2
#answer3 .error3 #q3
#answer4 .error4 #q4
#answer5 .error5 #q5
#answer6 .error6 #q6
#answer7 .error7 #q7
#answer8 .error8 #q8
#answer9 .error9 #q9

Answer 2

[forspamonly2]

вы пытаетесь логику связать с повторяющейся разметкой. это фундаментально неправильный подход.

для такой задачи достаточно иметь разметку для одного вопроса с ответами без текста (шаблон), а текст всех вопросов и ответов иметь как данные в скрипте.

текст текущего вопроса и ответов на него выводить в нужные места разметки, при выборе ответа переходить к следующему.

то есть данные отдельно, отображение отдельно. а там и до mvc недалеко.

Comments

[Александр Калелов]

можно попробовать через массив?

[forspamonly2]

ну да. один массив вопросов с их ответами, одна переменная с индексом текущего вопроса, функция для заполнения шаблона текущим вопросом и логика перехода на следующий вопрос на кнопках с ответами.