javascript - Javascript 中带键盘的可导航菜单

Question

我有一张带有 Twitter Bootstrap 的 HTML 表格。

当我点击表格时，javascript 获取一个 id 并用信息填充模态框。像这样:

$('.table > tbody > tr').click(function() {
   //lots of things happens
});

---

 <div class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
               <!-- lots of information loaded with AJAX --->
            </div>
        </div>
    </div>

这很好用，但是我不仅希望能够单击，还希望能够使用按钮进行导航(按下键会向下，按下向上键会向上排)。

如有任何建议，我们将不胜感激。

Answer 1

首先，您需要使用函数包装您的代码并从您的点击处理程序中调用它:

var $table = $('.table'),
    $tableRows = $table.find('tbody > tr');

$tableRows.click(function() {
    rowToModal($(this));
});

function rowToModal($row) {
    $tableRows.removeClass('active-row');
    $row.addClass('active-row');

    //lots of things happens
}

然后，您可以为“keydown”事件创建处理程序:

$(document).on('keydown', function(e) {
    if (/*check if modal is currently open*/ ) {
        var $currentRow = $($table.find('.active-row')),
            $nextRow;

        if (e.key == 'ArrowDown') {
            $nextRow = $currentRow.next();
        } else if (e.key == 'ArrowUp') {
            $nextRow = $currentRow.prev();
        }

        if ($nextRow && $nextRow.length) {
            rowToModal($nextRow );
        }
    }
});