这2天在用jquery写答题提交功能,出现问题
选择答题的要求是:选择一道题后,出现下一道题,但是出现的下一道题可能跟前面的题目有关联,如果不满足要求,那么或许跳过下道题,显示下道题的下道题。但是在做第五题跟第六题出现一个问题。
需求是如图 :
(本意是第五题有6个小题,第六题也有6个小题,当选择第五题的小题中radio值为1或2的时候,就会显示第六题对应的题号;)我的代码是:
var showQuestion = function(questionId){
$("*[question='"+questionId+"']").show();
$("*[id='q"+questionId+"_tit']").show();
}
var hideQuestion = function(questionId){
$("*[question='"+questionId+"']").hide();
$("*[id='q"+questionId+"_tit']").hide();
}
var getQuestionValue = function(questionId){
var question=$("[question='"+questionId+"']");
return $(":radio:checked",question).val();
}
var init = function(){
$("dd[id]").each(function(index,item){
quesId = $(this).attr("id").replace("q","");
$(this).attr("question",quesId);
});
}
$(document).ready(function(){
init();
$("*[question]").hide();
$("*[id*=_tit]").hide();
$("*[question]").click(updateAllquestions);
updateAllquestions();
});
function updateAllquestions(){
console.log("update start ......");
var question1=$("[question='1']");
var question5=$("[question='5']");
var question6=$("[question='6']");
var question1_val = getQuestionValue(1);
//question 1
showQuestion(1);
showQuestion(2);
showQuestion(3);
showQuestion(4);
showQuestion(5);
//question6
var checkedNum = $(":radio:checked",question5).length;
var showQ6condition = $(":radio:checked[value!='3']",question5).length;
if (showQ6condition > 0){
showQuestion(6);
$(":radio:checked",question5).each(function(){
var trIndex = $("tr",question5).index($(this).parents("tr"));
if ($(this).val() == "3"){
$("tr",question6).eq(trIndex).hide();
}else{
$("tr",question6).eq(trIndex).show();
}
})
}else{
hideQuestion(6);
}
showQuestion(7);
showQuestion("7_1");
console.log(question1_val);
if (isEmpolyee()){
showQuestion(8);
showQuestion(20);
}else{
hideQuestion(8);
hideQuestion(20);
}
showQuestion(9);
showQuestion("9_1");
//question10
var question9_val = getQuestionValue(9);
var question9_1_val = getQuestionValue("9_1");
console.log(question9_val);
console.log(question9_1_val)
if (isOneOrTwo(question9_val) || isOneOrTwo(question9_1_val) ){
showQuestion(10);
}else{
hideQuestion(10);
}
if (isEmpolyee()){
showQuestion(11);
showQuestion(12);
showQuestion(14);
}else{
hideQuestion(11);
hideQuestion(12);
showQuestion(14);
}
var question12_val = getQuestionValue(12);
if (isOneOrTwo(question12_val)){
showQuestion(13);
}else{
hideQuestion(13);
}
var question14_val = getQuestionValue(14);
if (question14_val != undefined && (question14_val == 1 || question14_val == 2 || question14_val == 3)){
showQuestion(15);
showQuestion(16);
showQuestion(17);
}else{
hideQuestion(15);
hideQuestion(16);
hideQuestion(17);
}
if (
isEmpolyee()
&& (question14_val != undefined && (question14_val == 1 || question14_val == 2 || question14_val == 3))
){
showQuestion(18);
showQuestion(19);
}else{
hideQuestion(18);
hideQuestion(19);
}
if(
(question1_val != undefined && question1_val == 1 )
&& showQ6condition.length > 0
){
showQuestion(21);
}else{
hideQuestion(21);
}
showQuestion(22);
showQuestion(23);
showQuestion(24);
if (isEmpolyee()){
showQuestion(25);
}else{
hideQuestion(25);
}
showQuestion(26);
showQuestion(27);
showQuestion(28);
}
function isOneOrTwo(value){
return value != undefined && (value == 1 || value == 2);
}
function isEmpolyee(){
var question1_val = getQuestionValue(1);
return (question1_val != undefined && (question1_val == 2 || question1_val == 3));
}
五六题弄昏了 感觉写的条件都那么的问题,谁指导下
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
过分依赖了js,就不够语义化了,可移植性也很差。
我建议你使用AngularJS,这样就会好看很多。例如选中某个checkbox后,会出现其它选项,HTML大概可以这样写: