Question

所以我正在制作一个游戏，我有一个可点击的网格，如这个小提琴所示：http://jsfiddle.net/6qkdP/2/

游戏中的用户通过点击相邻的图块在网格中导航，但用户建议使用箭头键。

我的想法只是做一些简单的数学计算，并根据他们点击的箭头键找出用户想要移动到哪个图块。因此，如果它们位于数组索引24并向左移动，则新索引将为23。

我的问题是，如何触发点击我提供给我的所有信息都是用户移动到的数组中的索引？

编辑：为了澄清，我知道jQuery中的触发器，我只是不知道该传递什么。如果我有100个图块（从0到99），并且我想触发23号，我该怎么做？

另一个编辑：我最终给网格一个ID（gameGrid），然后用它：

$('#gameGrid td:eq('+tile+')').trigger('click');

Answer 1

您可以使用以下函数在瓷砖的row位置

的情况下获取平铺column和visible

function getRowColumn(number) {
    number = number - 1;
    return({
        row : Math.floor(number/10),
        column : (number % 10)
    });
}

然后使用jQuery获取给定行和列的元素。下面是一个纯javascript函数（我建议你使用jQuery）来做到这一点

function clickTile(tileNumber) {
    var pos = getRowColumn(tileNumber);
    var tileRow = document.querySelectorAll('table tr')[pos.row];
    var tile = tileRow.children[pos.column];
    tile.click();
}

Answer 2

试试这个：

使用箭头键并在网格中移动......

[1] 创建一个名为args的全局变量。

[2] 在clickableGrid下，将参数从callback分配到args javascript对象 像这样：

args = {};
args.elem = el;
args.row = row;
args.col = col;
args.item = i;

[3] 然后为listener添加 keydown $(document)并检查 Left < / kbd>，右，向上和向下键，其中包含从先前点击的图块分配的当前args（它必须首先单击一个图块，以便获取网格中的第一个位置，以便稍后根据按下的键移动另一个图块然后计算新的row和column到最后将click事件触发到新图块。

现场演示： http://jsfiddle.net/oscarj24/6qkdP/317/

$(document).on('keydown', function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if ($('.grid tr td.clicked')[0]) {
        var leftKey = 37, upKey = 38,
            rightKey = 39, downKey = 40,
            otherKey = false;
        if(args) {
            var col = args.col, row = args.row;
            switch(code) {
                case leftKey:
                    col = col - 1;
                    break;
                case rightKey:
                    col = col + 1;
                    break;
                case upKey:
                    row = row - 1;
                    break;
                case downKey:
                    row = row + 1;
                    break;
                default:
                    otherKey = true;    
            }
            if(!otherKey) {
                var row = $('.grid tr').eq(row);
                var tile = row.children().eq(col);
                tile.trigger('click');
            }
        }
    }
});

如何触发可点击表格上的点击

2 个答案:

试试这个：