将按钮状态设置为使用jQuery激活 [英] Set button state to active with jQuery

问题描述

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

I need to get my buttons to go to the .active state when they keyboard button is pressed and not just when clicked.

这是我的代码...在此先感谢.

here is my code... thanks in advance.

脚本:

$(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>

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

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

推荐答案

您必须创建一个class，其中style与button的:active状态相同，因此:

You have to create a class which style is the same of the :active state of the button so :

一般示例

.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 button style，则必须这样做:

Or if you have a ul li button style then you have to do:

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

这篇关于将按钮状态设置为使用jQuery激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！