将按钮状态设置为使用jQuery

Question

我需要让按钮在按下键盘按钮时进入.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> 

............................ .................................................. .....

Answer 1

我不知道没有你的意思“SET按钮。活跃”，但例如，你可以通过这个代码触发其点击：

$(document).keypress(function(e){ 

    if(e.keychar == 'w') 
    { 
     $("#forward").trigger('click'); 
     //You can do any thing here ex. "set button state Active" 
     //$("#forward").addClass('active'); 
    } 
    else if(e.keychar == 's') 
     $("#back").trigger('click'); 
    else if(e.keychar == 'a') 
     $("#left").trigger('click'); 
    else if(e.keychar == 'd') 
     $("#right").trigger('click'); 

}); 

Answer 2

你必须创建一个class这style相同的:active状态button这样的：

一般例子

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

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

代码

CSS

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

或者，如果你有一个ul li buttonstyle然后你要做的：

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 
    }); 

Answer 3

你不能根据页面中添加。主动类...说如果你在/转发添加.active转发...或者你也可以这样做：

$("#forward").click(function() { 
     $.ajax('/forward'); 
     $('button').removeClass('active'); 
     $(this).addClass('active'); 
});