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");
        }
    }