鼠標懸停div屬性（標題）

Question

我有一個學習遊戲，它是一個簡單的記憶遊戲。

該遊戲旨在運行在手機和平​​板電腦上，變量用於屬性（標題），在計算機中使用時，鼠標懸停時，請查看（標題）小卡片的名稱，而不會失敗。

是否可以更改（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。

您也可以通過將值作爲第二個參數寫&變化數據：

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

得到：$(".card").data("card-num"); - >2

---

你甚至可以設置/得到複雜的對象和其他任意數據。

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

得到：$(".card").data("cardObj").isSelected - >false

得到：$(".card").data("cardObj") - >{card: 2, isSelected:false}