Columbia遗留问题
本来Columbia只是按照顺序,导航不可以点击,数组按照顺序push的小东西
在leader的要求下,要变成导航可以点击,无顺序的一团浆糊,经过了大概长达两天(我是不是太适合做程序!)的反复纠结,浆糊,终于搞定了!
其实程序基本忘记了,但是主要功能就是未点击是黄色,点了之后是蓝色,还有一个高亮,关键还有顺序会颠倒啊!!!!!
最关键的总结就是:程序是要先设计的,想到一出是一出,只会让后面的东西,越来越浆糊,搞不清楚!!结构清晰后,我只用了一杯水的去厕所的时间完成了。
主要函数:afterChangeArr showCurQuestion
var sex = ["male","female"]; var season = ["spring","summer"]; var sports = ["climbing","hiking","cross","water","leisure"]; var temperature = ["big","small"]; //题目的顺序 var indexArr = ["sex","season", "enviroment", "temperature" , "sports" ,"purpose"]; var msg = []; var tempArr = []; $(".qa_list_cont").each(function(){ $(this).click(function(){ soundManager.play('click-sound'); var curChildID = $(this).attr("data-title"); var curParentID = $(this).parent().attr("id"); msg[curParentID] = curChildID; if(indexArr.indexOf(curParentID)>-1){ tempArr.unshift(curParentID); indexArr.splice(indexArr.indexOf(curParentID),1); } afterChangeArr(indexArr,tempArr); //独立事件点击题目后为当前状态 $(this).parent().children("div").children("div").removeClass("qa_on"); $(this).children("div").addClass("qa_on"); $(this).parent().children("div").children(".qa_list").removeClass("selected"); $(this).children(".qa_list").addClass("selected"); }); }); $(".prev").click(function(){ soundManager.play('click-sound'); indexArr.unshift(tempArr[0]); tempArr.splice(tempArr[0],1); afterChangeArr(indexArr,tempArr); console.log('prev ' , indexArr); }); $(".bar li").each(function(i) { $(this).click(function(){ showCurQuestion($(this).attr("data-title")); }); }); //显示当前问题页,点击完问题和切换bar时候用到 function showCurQuestion(id){ // 最后一个也消失了 if(id){ $("#question").children("div").fadeOut(0); $("#"+id).fadeIn(0); curBar(id); } } //当数组发生变化时,执行的事件,bar只是状态,数组不会变化 function afterChangeArr(arr,removeArr){ showCurQuestion(arr[0]); if (arr.length >=6) { $(".prev").fadeOut(0); }else{ $(".prev").fadeIn(0); if(arr.length < 1){ $("#btnResult").css({"display":"block"}); }else{ $("#btnResult").css({"display":"none"}); } }; for(var i = 0 ; i < removeArr.length ; i++){ afterQuestionBar(removeArr[i]); } for(var i = 0 ; i < arr.length ; i++){ beforeQuestionBar(arr[i]); } } curBar("sex"); //bar 三种状态之当前高亮 function curBar(id){ $(".bar li").removeClass("li_on"); $(".bar li[data-title='"+id+"']").addClass("li_on"); showCSS3(id); } //bar 三种状态之问题回答后 function afterQuestionBar(id){ $(".bar li[data-title='"+id+"']").removeClass(); $(".bar li[data-title='"+id+"']").addClass("cur"); } //bar 三种状态之后退后 变为未完成状态 function beforeQuestionBar(id){ $(".bar li[data-title='"+id+"']").removeClass("cur"); } function showCSS3(id){ console.log("showCSS3"); $("div.qa_list_cont").removeClass().addClass("qa_list_cont"); if($("#"+id).children(".qa_list_cont").length > 3){ $("#"+id).children(".qa_list_cont").addClass("fadeInUp"); }else{ $("#"+id).children(".qa_list_cont").first().addClass("fadeInLeft"); $("#"+id).children(".qa_list_cont").last().addClass("fadeInRight"); } }