Hiển thị phần tử trong list object với jquery

#1

Em có một list câu hỏi và thực hiện hiện thị lần lượt từng câu… khi trả lời xong thì click next để sang câu tiếp theo… và có thể quay lại trả lời…
em đã là ngon chỗ next nhưng với button back thì lại đang lỗi tung lên

   htmlArr.push('<div class="question-list">');
surveyObj.listQuestion.forEach(question=>{
	htmlArr.push('<div id="'+question.questionId+'" class="question">'); 
	htmlArr.push('<h3>'+question.content+'</h3>');
	htmlArr.push('<div style="display:none;" id="'+question.answerType+'" class="answerType-'+question.questionId+'"> assd</div>');
	htmlArr.push('<span id="err-'+question.questionId+'" style="color:red; display:none;" >Không thể để trống đáp án</span>');
	console.log(question.answerType);
	
		htmlArr.push('<div class="answer-list">');
		question.listAnswer.forEach(answer=>{
			htmlArr.push('<div class="answer" id="'+answer.answerId+'">');
			htmlArr.push('<input type="radio" id="answerId-'+answer.answerId+'" name="questionId-'+question.questionId+'" class="answer-input" data-id="'+answer.answerId+'" value="'+answer.answerId+'" >');
			htmlArr.push('<label for="answer-'+answer.answerId+'">'+answer.content+'</label>');
			
			htmlArr.push('</div>');
		});
		htmlArr.push('</div>');
		htmlArr.push('</div>');
	}
htmlArr.push('</div>');
htmlArr.push('</div>');

htmlArr.push('<button class="btn btn-success btn-next" type="button" data-index="0">Tiếp theo</button>');
htmlArr.push('<button class="btn btn-success btn-back" type="button" style="display:none;" >Quay lại</button>');
htmlArr.push('<button class="btn btn-success btn-finish" type="button" style="display:none;">Hoàn thành</button>');

đây là function khi click button quay lại

jQuery('#survey').find('.btn-back').click(function(){
	jQuery('.question-list .question').hide();
	jQuery('#survey .btn-finish').hide();

	var index = parseInt(jQuery('.btn-next').attr('data-index'));
	jQuery('.btn-next').attr('data-index', index - 1);
	console.log(index);
	if(index <= 0){
		index=0;
		jQuery('.btn-next').attr('data-index', index);
		jQuery('#survey .question-list .question').eq(index).show();
		jQuery('#survey .btn-next').show();
		jQuery('#survey .btn-back').hide();
	}else{
		jQuery('#survey .question-list .question').eq(index).show();
		jQuery('#survey .test-result').hide();
		jQuery('#survey .btn-next').show();
		jQuery('#survey .btn-back').show();
	}	
});
#2

có ai đó đi qua có thể giúp em không

#3

Có gì rối?
Chỉ lưu chỉ số câu hỏi và đáp án (nếu có) thôi.

1 Like
#4

khi click button back thì nó bị loạn thứ tự hiện thị câu hỏi ạ. chứ e ko hỏi phần lưu kết quả…
dù e đã index- 1 và .eq(index) nhưng nó không hiện đúng thứ tự mà cứ bị loạn thứ tự

#5

Nút Next với Back chẳng có gì khác nhau, ngoại trừ 1 tiến, lùi.
Thế nút Next bạn viết thế nào?
Bạn sao chép nguyên si mà quên sửa?

1 Like
#6

bạn chỉ mình vài dòng jquery dc khôg bạn

#7

Mình chưa dùng JQuery nhiều. Chỉ Javascript thuần, chỉ cho bạn gì nhỉ?
Thế sự kiện cho nút Next bạn xử lý thế nào?

1 Like
#8 
jQuery('#survey').find('.btn-next').click(function(){
	// hide all
	jQuery('.question-list .question').hide();
	
	// show current index
	var index = parseInt(jQuery(this).attr('data-index'));
	
	// set next index
	jQuery(this).attr('data-index', index+1);
	if(index>0){
		jQuery('#survey .btn-back').show();
	}
	 if(index == jQuery('#survey .question-list .question').length){
		jQuery('#survey .btn-next').hide();
		jQuery('#survey .btn-back').show();
		jQuery('#survey .btn-finish').show();
	}else{			
		jQuery('#survey .question-list .question').eq(index).show();
		jQuery('#survey .test-result').hide();
		jQuery('#survey .btn-next').show();			
	}	
});

button next thì index + 1, còn button back thì index -1;
hay do lỗi chỗ gán trị index này ạ

#9

Hai nút này liên quan đến nhau. Khi tới thì cũng điều chỉnh thay đổi (index) cho cả 2 chứ. Xem mã của bạn thì bạn chỉ chú trọng đến nút Next cho cả 2 sự kiện tới/lui.

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?