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

        }

    }