我需要让我的按钮在按下某个键盘按钮时(而不是单击时)变为 :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>
...................................................... ......................................
最佳答案
您必须创建一个类
,其样式
与按钮的
所以::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 按钮
样式
,那么您必须执行以下操作:
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 - 使用 jQuery 将按钮状态设置为事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18484240/