添加keydown點擊事件

在我的文字遊戲中有一個3字母的網格。

遊戲的目的是通過點擊側面相應的字母來拼寫單詞。

當網格中的某個區域突出顯示時，它向用戶指示要拼寫的單詞。用戶點擊網格側面的字母，然後移動到突出顯示的區域。

當單擊一個字母時，它將動畫到網格中的相應區域。我想盡可能使用戶友好，所以我想另外添加「keyDown（）」，這樣當用戶按下「a」時它會在屏幕上顯示動畫。

信件存儲在HTML這樣

<div class="tiles-wrapper"> 

     <div id="drag1" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="a"> 
     <p>a</p> 
     </div> 

     <div id="drag2" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="b"> 
     <p>b</p> 
     </div> 

     <div id="drag3" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="c"> 
     <p>c</p> 
     </div> 

     <div id="drag4" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="d"> 
     <p>d</p> 
     </div> 

     <div id="drag5" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="e"> 
     <p>e</p> 
     </div> 

     <div id="drag6" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="f"> 
     <p>f</p> 
     </div> 

     <div id="drag7" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="g"> 
     <p>g</p> 
     </div> 

     <div id="drag8" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="h"> 
     <p>h</p> 
     </div> 

     <div id="drag9" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="i"> 
     <p>i</p> 
     </div> 

     <div id="drag10" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="j"> 
     <p>j</p> 
     </div> 

     <div id="drag11" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="k"> 
     <p>k</p> 
     </div> 

     <div id="drag12" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="l"> 
     <p>l</p> 
     </div> 

     <div id="drag13" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="m"> 
     <p>m</p> 
     </div> 

     <div id="drag14" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="n"> 
     <p>n</p> 
     </div> 

     <div id="drag15" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="o"> 
     <p>o</p> 
     </div> 

     <div id="drag16" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="p"> 
     <p>p</p> 
     </div> 

     <div id="drag17" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="q"> 
     <p>q</p> 
     </div> 

     <div id="drag18" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="r"> 
     <p>r</p> 
     </div> 

     <div id="drag19" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="s"> 
     <p>s</p> 
     </div> 

     <div id="drag20" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="t"> 
     <p>t</p> 
     </div> 

     <div id="drag21" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="u"> 
     <p>u</p> 
     </div> 

     <div id="drag22" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="v"> 
     <p>v</p> 
     </div> 

     <div id="drag23" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="w"> 
     <p>w</p> 
     </div> 

     <div id="drag24" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="x"> 
     <p>x</p> 
     </div> 

     <div id="drag25" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="y"> 
     <p>y</p> 
     </div> 

     <div id="drag26" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="z"> 
     <p>z</p> 
     </div>

我也有一些劇本，但我不知道如何將它連接起來

$(document).keypress(function(e){ 

     if (e.which >= 97 && e.which <= 122) { 
       animateDrag(String.fromCharCode(e.which)); 
    } 

});

http://jsfiddle.net/smilburn/Dxxmh/88/

來源

2012-11-01 Milo-J

你的小提琴只顯示一個按鈕，按下時沒有任何反應.. – Nelson

對不起隊友檢查編輯@Nelson –

您可以通過在此時，相應的字母DIV觸發click事件做到這一點，就像這樣：

$(document).keypress(function(e){ 
      if (e.which >= 97 && e.which <= 122) { 
        letter = String.fromCharCode(e.which); 
        $(".drag[data-letter='"+letter+"']").trigger('click'); 
      } 

});

見工作demo

來源

2012-11-01 12:38:49 Nelson

那偉大的納爾森謝謝。我不認爲你可以告訴我爲什麼班級完整詞不適用於正確的地方@Nelson –

這是一種荒謬的，你應該打開另一個答案，無論如何，我搜索小提琴的'完整'字符串，並沒有找到任何匹配，你在發佈的小提琴中沒有任何叫做'complete'的東西。 – Nelson

我的意思是說右詞。我希望它被添加到@Nelson的 –

$().ready(function() { 
    $('div.player-tiles, div.player-tiles2').keypress(function(e) { 
     if (e.which >= 97 && e.which <= 122) { 
      animateDrag(String.fromCharCode(e.which)); 
     } 
    }) 
})

來源

2012-11-01 12:38:34

你不應該只是給代碼，而是對代碼的一些解釋。 – brimborium

添加keydown點擊事件

回答

相關問題