Question

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

<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被按下1}}

示例

jQuery:contain();

Answer 3

我首先要制作一张li的地图，这样就很容易找到它们，所以在每次按键时都不需要进行繁重的文本计算，然后只需在按键上测试按键：

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

Demonstration

jquery元素选择键盘按键代码

3 个答案: