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

Set button state to active with jQuery

提问by user1919580

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

我需要让我的按钮在按下键盘按钮时进入 .active 状态，而不仅仅是在点击时。

here is my code... thanks in advance.

这是我的代码......提前致谢。

Script :

脚本 ：

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

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>

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

………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………

回答by steo

You have to create a classwhich styleis the same of the :activestate of the buttonso :

你必须创建一个class该style是一样的:active的状态button如此：

General example

一般示例

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

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

Your CODE

你的代码

CSS

CSS

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

Or if you have a ul li buttonstylethen you have to do:

或者，如果您有，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
     });

回答by Md. Abu Bakker Siddique

$(document).ready(function () {
$("ul > li button").click(function () {
        $('ul > li button').removeClass('active');
        $(this).addClass('active');
    });
});

ul > li button.active{
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

回答by Ali Foroughi

I dont know what did you mean about "Set Button to .Active" but for example you can trigger its click by this code :

我不知道你对“Set Button to .Active”的意思是什么，但例如你可以通过以下代码触发它的点击：

$(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');

});

回答by Bharat Soni

can't you add .active class according to the page... say if you are on /forward add .activeto forward... or you can do it like this too:

你不能根据页面添加 .active 类...说如果你在 /forward add .activeto forward... 或者你也可以这样做：

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