javascript - 点击和按键事件的jQuery相同行为

  显示原文与译文双语对照的内容
0 0

我正在编写一个简单的记忆游戏,并需要使它既可用鼠标和键盘。 在卡片网格中,我可以为箭头键构建监听器,但是我不能让输入键事件模拟"单击"事件,这就是launchs函数的作用。 下面是代码:

-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();
});

});

谢谢!

时间: 原作者:

0 0

尝试触发器以调用click事件。 还有insted的keycode 试图。"。"。 这将适用于捕获 Enter事件:


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

原作者:
...