首页 > 代码库 > Columbia遗留问题

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 = [];
    soundManager.setup({
        url: ‘../swf/‘, //swf文件夹的位置
        onready: function() {
            soundManager.createSound({
                id: ‘click-sound‘,
                autoLoad: true,
                autoPlay: false,
                url: ‘music/mouseclick.mp3‘ //mp3文件的位置
            });
          }
    });

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