Question

我有一个学习游戏，它是一个简单的记忆游戏。

游戏设计为在手机和平板电脑上运行，变量用于属性（标题），在计算机中使用时，鼠标悬停时，查看（标题）小卡片的名称，不会失败。 / p>

是否可以更改（alt）的属性（标题）？或隐藏标题onmouseover？

非常感谢你的帮助

CODE：

        function game(){
            var _PLACES=new Array(0,1,2,3,4,5);
            shuffle(_PLACES);

            var _RIG=new Array();
            var _LEF=new Array();
            for(var i=0;i<6;i++){
                _RIG[i]='<div onclick="select_card(1,this);" class="card" title="card_'+i+'"><i><b>'+_GAME["hanzi"][i]+'</b>'+_GAME["definition"][i]+'</i></div>';
                _LEF[i]='<div onclick="select_card(2,this);" class="card" title="card_'+i+'"><i>'+_GAME["pinyin"][i][_GAME["correct"][i]]+'</i></div>';
            }

            shuffle(_RIG);
            shuffle(_LEF);

            $("#OPTIONS").html('<div id="rig">'+_RIG[0]+_RIG[1]+_RIG[2]+_RIG[3]+_RIG[4]+_RIG[5]+'</div><div id="lef">'+_LEF[0]+_LEF[1]+_LEF[2]+_LEF[3]+_LEF[4]+_LEF[5]+'</div>');
        }

        function shuffle(o){
            for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
            return o;
        };

        var _card=new Array(0,7,7);
        function select_card(side,card){

            if(_card[side]==7){
                card.style.background="#FFFFFF";
                var el=card.getElementsByTagName("*");
                for(var i=0;i<el.length;i++){
                    el[i].style.visibility="visible";
                }

                _card[side]=card.title.toString().replace("card_","");
            }else{
                $("#"+(side==1?"rig":"lef")+" .card[name!='res']").attr("style","");
                $("#"+(side==1?"rig":"lef")+" .card[name!='res'] *").attr("style","");
                _card[side]=7;
                select_card(side,card);
                return;
            }

            if(_card[1]!=7 && _card[2]!=7){
                if(_card[1]==_card[2]){
                    _AU.src=_GAME["audio"][_card[2]];
                    try{_AU.play();}catch(err){}
                    $('.card[title="card_'+_card[1]+'"]').attr("name","res"+_card[1]);
                    $('.card[title="card_'+_card[1]+'"]').attr("onclick","");
                    _GAME["points"]++;
                    $("#score").html("points: "+_GAME["points"]+"/6");
                }else{
                    $('#rig .card[title="card_'+_card[1]+'"]').css("background","#FDD");
                    $('#lef .card[title="card_'+_card[2]+'"]').css("background","#FDD");
                    setTimeout(function(){
                        $(".card").each(function(ind){
                            try{
                                if(this.name.toString().search("res")=="-1"){
                                    $(this).attr("style","");
                                    $(this).find("*").attr("style","");
                                }
                            }catch(err){
                                $(this).attr("style","");
                                $(this).find("*").attr("style","");
                            }
                        });
                    },1000);
                }
                _card[1]=7;
                _card[2]=7;
            }

Answer 1

在title属性中存储变量不是最好的主意，因为它专门用于标题。相反，您应该使用data-*属性。由于您使用的是jQuery，因此它已经支持轻松读取/写入数据属性：http://api.jquery.com/data/

您可以<div class="card" data-card-num="2"></div>然后使用$(".card").data("card-num");来读取值，在这种情况下会返回2。

你也可以写＆amp;通过将值作为第二个参数传递来更改数据：

设置：$(".card").data("card-num", 99);

获取：$(".card").data("card-num"); - ＆gt; 2

您甚至可以设置/获取复杂对象和其他任意数据。

设置：$(".card").data("cardObj", {card: 2, isSelected:false});

获取：$(".card").data("cardObj").isSelected - ＆gt; false

获取：$(".card").data("cardObj") - ＆gt; {card: 2, isSelected:false}

在mouseover div上隐藏属性（标题）

1 个答案: