使用jQuery将按钮状态设置为活动状态

我需要让按钮在按下键盘按钮时进入.active状态,而不是单击时按钮.

这是我的代码…提前谢谢.

脚本：

$(document).on('keypress', function (e) {
    var tag = e.target.tagName.toLowerCase();
    if (e.which === 119 && tag != 'input' && tag != 'textarea')
        $('#forward').click();
    if (e.which === 115 && tag != 'input' && tag != 'textarea')
        $('#back').click();
    if (e.which === 97 && tag != 'input' && tag != 'textarea')
        $('#left').click();
    if (e.which === 100 && tag != 'input' && tag != 'textarea')
        $('#right').click();
});

$(function () {
    $("#forward").click(function () {
        $.ajax('/forward');
    });
    $("#back").click(function () {
        $.ajax('/back');
    });
    $("#left").click(function () {
        $.ajax('/left');
    });
    $("#right").click(function () {
        $.ajax('/right');
    });
});

HTML：

<ul class="button-list">
 <li>
    <button id="forward">W</button>
 </li>
 <li>
    <button id="back">S</button>
 </li>
 <li>
    <button id="left">A</button>
 </li>
 <li>
    <button id="right">D</button>
 </li>
</ul>

………………………………………….. ……………………………

您必须创建一个类,其类型与：按钮的活动状态相同,因此：

一般例子

.buttonclass:active , .activated { /* somestyle */ }

$('.buttonclass').on('click', function(){ 
  $(this).addClass('activated'); //eventually removeClass of some previous class
  //other stuff
});

你的CODE

CSS

#forward:active, .forwardactivate{}
#back:active, .backactivate{}

或者,如果你有一个ul li按钮样式,那么你必须这样做：

ul li button:active, .activatebutton {} /* style*/

JAVASCRIPT

$(function() {
            $("#forward").click(function() {
              $.ajax('/forward');
              if($(this).hasClass('forwardactivate'))
                $(this).removeClass('forwardactivate'); //change with .activatebutton
              else      
               $(this).addClass('forwardactivate');
             });

            //etc
     });