Javascript按鍵使光明

Question

在網頁上，如何使用戶能夠使用鍵盤上的特定鍵來點亮頁面上的框/項目？ 例如。 我想讓M點亮我的標題，當我再次按M時，它會關閉嗎？

這是我到目前為止所擁有的，但是感覺可以被清理很多

$('#abutton').click(function() {
    $('#abutton').removeClass('off').addClass('on');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#bbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('off').addClass('on');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#cbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('off').addClass('on');
    $('#dbutton').removeClass('on').addClass('off');
    window.scrollTo(0,0);
});

$('#dbutton').click(function() {
    $('#abutton').removeClass('on').addClass('off');
    $('#bbutton').removeClass('on').addClass('off');
    $('#cbutton').removeClass('on').addClass('off');
    $('#dbutton').removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

Answer 1

只需將通用類.button添加到所有這些類中即可。 然后從所有.button元素中刪除on ，並on class上添加到完全單擊的元素。

$('.button').click(function() {
    $('.button').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
    window.scrollTo(0,0);
});

Answer 2

您需要將addEventListener添加到代碼中，並在代碼內部檢查是否按下的鍵具有您希望執行某些操作的keyCode。 看下面的例子：

addEventListener("keydown", (event) => { if (event.keyCode === '13') //light on/off });

請檢查文檔以獲取更多詳細信息

編輯： jQuery也有其鍵盤事件