jQuery - 同樣的行爲點擊和按鍵事件

Question

我正在編程一個簡單的記憶遊戲，並需要使它與鼠標和鍵盤都可用。我能夠構建箭頭鍵的偵聽器以便在卡片網格中移動，但我不能讓Enter鍵事件模擬​​啓動openCard函數的「click」事件。 下面的代碼：

-HTML（這基本上是卡網格）

<div id="game_container"> 
     <div id="game_board"> 
      <div id="card1" class="browsable colorcard firstinline"><div class="colour"></div></div> 
      <div id="card2" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card3" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card4" class="browsable colorcard lastinline"><div class="colour"></div></div> 
      <div id="card5" class="browsable colorcard firstinline"><div class="colour"></div></div> 
      <div id="card6" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card7" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card8" class="browsable colorcard lastinline"><div class="colour"></div></div> 
      <div id="card9" class="browsable colorcard firstinline"><div class="colour"></div></div> 
      <div id="card10" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card11" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card12" class="browsable colorcard lastinline"><div class="colour"></div></div> 
      <div id="card13" class="browsable colorcard firstinline"><div class="colour"></div></div> 
      <div id="card14" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card15" class="browsable colorcard"><div class="colour"></div></div> 
      <div id="card16" class="browsable colorcard lastinline"><div class="colour"></div></div>     
      <div class="fixfloat"></div> 
      <div id="msg"></div> 
     </div> 

，這裏是jQuery的部分：

$(document).ready(function() { 

$(".colour").hide(); 
$("#game_board div").click(openCard); 
$(".browsable:first").addClass("selected"); 

shuffle(); 

$(document).keydown(function(e) { 
    var cur_idx = $(".browsable").index($(".selected")); 
    var max_idx = $(".browsable").length - 1; 
    var row_length = 4; 
    switch (e.keyCode) { 
     case 13: 
      // Perform some action when enter is placed 
      // HERE should I define what happens when I press ENTER 
      break; 
     case 37: 
      // Navigate left 
      if (cur_idx === 0) { 
       var next_idx = 0; 
      } else { 
       var next_idx = cur_idx - 1; 
      } 
      break; 
     case 38: 
      // Navigate up 
      if ((cur_idx - row_length) <= 0) { 
       var next_idx = 0; 
      } else { 
       var next_idx = (cur_idx - row_length); 
      } 
      break; 
     case 39: 
      // Navigate right 
      if (cur_idx === max_idx) { 
       var next_idx = cur_idx; 
      } else { 
       var next_idx = cur_idx + 1; 
      } 
      break; 
     case 40: 
      // Navigate down 
      if ((cur_idx + row_length) >= max_idx) { 
       var next_idx = max_idx; 
      } else { 
       var next_idx = (cur_idx + row_length); 
      } 
      break; 
    } 
    if (typeof next_idx !== 'undefined') { 
     $(".browsable.selected").removeClass("selected"); 
     $(".browsable").eq(next_idx).addClass("selected"); 
    } 
}); 

function openCard() { 

    id = $(this).attr("id"); 

    if ($("#" + id + " .colour").is(":hidden")) { 
     $("#game_board div").unbind("click", openCard); 

     $("#" + id + " .colour").slideToggle('fast'); 

     if (coloropened === "") { 
      boxopened = id; 
      coloropened = $("#" + id + " .colour").css("background-color"); 
      setTimeout(function() { 
       $("#game_board div").bind("click", openCard); 
      }, 300); 
     } else { 
      currentopened = $("#" + id + " .colour").css("background-color"); 
      if (coloropened !== currentopened) { 
       // close again 

       setTimeout(function() { 
        $("#" + id + " .colour").fadeOut(1000); 
        $("#" + boxopened + " .colour").fadeOut(1000); 
        boxopened = ""; 
        coloropened = ""; 
       }, 400); 
       points--; 
       $("#points").html("" + points); 
      } else { 
       // found 
       $("#" + boxopened + ".colorcard").css('visibility', 'hidden'); 
       $("#" + id + ".colorcard").css('visibility', 'hidden'); 
       found++; 
       points++; 
       boxopened = ""; 
       coloropened = ""; 
       $("#points").html("" + points); 
      } 
      setTimeout(function() { 
       $("#game_board div").bind("click", openCard); 
      }, 400); 
     } 

     count++; 
     $("#count").html("" + count); 

     if (found === 8) { 
      $("#msg").show(); 
     } 
    } 
} 

$('#restart_button').click(function() { 
    resetGame(); 
}); 

}）;

謝謝！

Answer 1

嘗試觸發調用單擊事件....也insted的鍵碼的嘗試這.... 這將捕捉輸入關鍵事件工作：

$(document).keypress(function(e) { 
    if(e.which == 13) { 
     $("#game_board div").trigger('click'); 
    } 
});