將按鈕狀態設置爲使用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'); 
});