欧洲冠军杯决赛要开打了 排兵布阵 排出你最喜爱的阵容！ Champions League Final

 

欧洲冠军杯决赛要开打了，公司结合 FIFAONLINE2 做了个活动专题，其中一个效果是 选择自己喜欢的球员，正好这个游戏也是我挺喜欢玩的游戏，

把这个脚本写了一下，主要功能如下：

1.点击图标选择相应位置上的人员

2.相应键盘操作 上选 下选 回车确定等 （修正了循环选择效果）

3.人员选重时的提示

4.提交前的验证 和 提示

这次在原有的基础上，修改了不少地方，比如循环往复的菜单，之前的版本没有搞定， 先前的判断是 var nxt=_cdul.next("li") ? _cdul.next("li") : _ul.find("li:first");

总是不能取到后面的值，alert 显示为null ,很是奇怪。反复试验 改为

var nxt=_cdul.next("li").html() ? _cdul.next("li") : _ul.find("li:first"); 就行了， 所以有的时候判断一个元素是否存在还是得看看它的内容。

另外一个问题就是IE 对position的解析，果然很恶心。。害的我写了一大堆的hack 去搞定它。导致CSS相当的难看。

但是最终还是搞定了。

点击查看DEMO

代码很冗长 有兴趣的同学就看下吧：

$(document).ready(function(){
    var t=false;                       
    var target;
    var hidinput;
    var _ul;
//标记当前
function cur(ele){        
        ele=$(ele)? $(ele):ele;
        ele.addClass("cur").siblings().removeClass("cur");    
        }
$("#play").find("span").click( 
        function(){ //点击调出相应列表
            var _this=$(this);
            var y , x;
            x=parseInt(_this.css("left"))+10;
            var top=parseInt(_this.css("top"));
            _ul=_this.siblings("ul.sel_ply");            
              //默认标记第一个 方便响应键盘
              if(top<140){     //下面的列表向上显示
                y=top+parseInt(_this.height())+24+"px";                        
                _ul.css({top:y,left:x,zIndex:10000}).show();
                cur(_ul.children("li:first"));
                }else{
                y= top-parseInt(4+_ul.height())+"px";                
                _ul.css({top:y,left:x,zIndex:10000}).show();    
                cur(_ul.children("li:first"));
                }    
            
            $("ul.sel_ply").not(_ul).hide();            
            //_ul.find("em").html(_this.attr("title"));
            target=$(this);//点哪个就给哪个赋值
            hidinput=$(this).next("input"); //输入框也同时填上值
            }                        
        )
    $("#play").find("li").mouseover(
            function(){
                cur(this);
            })
    .click(function(){ //选中赋值 同时给隐藏的input赋值
        hidinput.focus();            
        var sw=false;                                        
        var _this=$(this);        
        var aim=_this.html();
        var span=$("#play").find("span");
        //var list=$("#play").find("li");        
        for(i=0; i<span.length; i++){
            if(span.eq(i).html()==aim) {sw=1; break;}            
            }
        if(!sw){ //没有重的就赋值
            target.html(aim).addClass("cur").removeClass("war");
            hidinput.val(aim);
            }else{ //如果有重的 就提示
                var temp=target.attr("title");
                var warn=$("<strong style='color:#f60'>选重啦!</strong>");
                target.html("");
                warn.appendTo(target);
                setTimeout(function(){
                    warn.hide();
                    target.html(temp).removeClass("cur");
                    },1000);                 
                }
        hidelist();
    })
    
    var hidelist=function hideul(){ //隐藏所有列表 取消选择状态
        $("#play").find("ul").hide();
        $("#play li").removeClass("cur");
        }
        
    function countdown(){    //下选 键盘down键
        var _cdul=_ul.children("li.cur");    
        var nxt=_cdul.next("li").html() ? _cdul.next("li") : _ul.find("li:first");            
        cur(nxt);            
        }    
        
    function countup(){ //上选 键盘up键
        var _cdul=_ul.children("li.cur");    
        var prv=_cdul.prev("li").html() ? _cdul.prev("li") : _ul.find("li:last");    
        cur(prv);            
        }    
        
    function sure(){ //回车确定 赋值
        _ul.children("li.cur").click();        
        }    
    
    $("#play").mousedown(function(event){
        event=event||window.event;                          
        if(event.which==3){ // 1 == left; 2 == middle; 3 == right  右键隐藏        
        hidelist();
        }    
    }).hover(function(){ //离开延时隐藏 1.5秒默认
            if(t){
                clearTimeout(t);
                }          
            },function(){
                t=setTimeout(hidelist,1500);
                }
        )
    
    $(document).keydown(function(event){ //用 $(document)来相应键盘事件
        event = event || window.event;
        event.preventDefault();
        switch(event.keyCode){
            case 27: hidelist();
            break;
            case 38: countup();
            break;
            case 40: countdown();
            break;
            case 39: countdown();
            break;
            case 37: countup();
            break;
            case 13: sure();
            break;                        
            }            
        })
    //验证表单和提交
        $("#sub").click(function(){
            var span=$("#play span");
            var swh=false;
            span.each(function(i){
                var val=span.eq(i).html();                  
                if(val=="门将"||val=="前锋"||val=="后卫"||val=="中场"||val==""){
                    span.eq(i).addClass("war");                    
                    swh=true;
                    }
                })
            if(swh){
                $("#info").html("您有未选的项目(以黄色标出),请选择！").show();
                setTimeout(function(){$("#info").fadeOut(500)},1500);
                }else{
                $("i_sel").submit();
                }            
        })    
        
//隔行换色
$("#datab table").find("tr:even").addClass("even");
var over=function(){
    $(this).addClass("hovr");
 }
var out=function(){
    $(this).removeClass("hovr");
    }
$("#datab table").find("tr").hover(over, out)
//切换    
function tab(id_tab,tag_tab,id_con,tag_con){
    $(id_tab).find(tag_tab).each(function(i){
    $(id_tab).find(tag_tab).eq(i).click(
        function(){
            cur(this);
            $(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide();
            }
        )                                      
    })    
    }
//End of docoment.ready