jquery - 键盘按键代码上的jquery元素选择

Question

我有一个ul列表，当我按下键盘上的一个键时，我想更改 li 的背景颜色。例子。我按下a键盘并更改文本的 li 的背景a。

<ul>
    <li>a</li>
    <li>b</li>
    <li>2</li>
</ul>

获得这个的最好和最简单的方法是什么？

Answer 1

你可以做这样的事情......

var li = $("ul li");

$(document).keypress(function(event) {
     li
      .filter(function() { 
         return $(this).text() == String.fromCharCode(event.which).toLowerCase();
      })
      .css("background-color", "#f00");
});

Answer 2

您可以在内部将事件作为参数传递keypress，然后使用event.which您可以跟踪key在检查是否li包含该单词之后按下的内容jQuery:contain();

例子

$(document).keypress(function(e){
   var keypressed = e.which;

   //process for checking pressed key value 
   $('ul li:contains('+ returned value of above process +')').css(
   {
      'background-color':'red'
   });
});

Answer 3

我将首先构建一个 li 的地图，以便轻松找到它们，这样就不必在每次按键时都进行大量的文本计算，然后只需在 keypress 上测试按键：

var map = {};
$('li').each(function(){
   var key = $(this).text().trim();
   if (key.length==1) map[key]=$(this);
});
console.log(map);
$(window).keypress(function(e){
  var key = String.fromCharCode(e.which);
  if (map[key]) map[key].css('background-color','red');
});

示范