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也有其键盘事件