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

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

- user1919580

---

你的意思是CSS伪类中的:active状态吗？ - Alex

抱歉，是的，那是正确的。 - user1919580

目前 CSS 动画在按键时不会运行。 - user1919580

Answer 1

你需要创建一个 class，其 style 与 button 的 :active 状态相同：

.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，那么您需要执行以下操作：

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

- steo

---

然而现在我有以下代码，但是在我按下按钮后它仍然停留在激活的类上。$.ajax('/forward'); $('button').removeClass('active'); $(this).addClass('active'); - user1919580

已编辑。如果您认为这是正确的答案，请接受它 :) - steo

Answer 2

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

- Md. Abu Bakker Siddique

Answer 3

我不知道你所说的“将按钮设置为 .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');

});

- Ali Foroughi

Answer 4

你能否根据页面添加 .active 类呢？比如，如果你在 /forward 页面，就给 forward 添加 .active 类。或者你也可以这样做：

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

- Bharat Soni

---

按钮选择器应该是'.button'。 - Isius