Javascript 如何将基于enter键的事件分配给选定的<；李>；内部元素<；ul>；

我有以下无序列表元素：

<ul id="here"></ul>

我用

元素动态地填充这个

元素，这些元素是使用JQuery.ajax（）从数据库中获取的产品名称。

元素只有在填充时才会显示。否则显示为

none

。我还可以使用向上键或向下键在

元素之间导航

填充

元素的代码为：

var pr= ["Product1", "Product2", "Product3", "Product4", "Product5", "Product6"];
for (var option in pr) {
  var newLi = document.createElement("li");
  newLi.innerHTML=pr[option];
  $("#here").append(newLi);
}

在

元素之间导航的代码是：

$(document).on("keyup", function(e) {
  if (e.keyCode === 38 || e.keyCode === 40) {
    e.preventDefault();

    var children = $("#here").children();
    if (currentFocus === undefined) {
      currentFocus = 0;
    } else {
      currentFocus += e.keyCode === 38 ? -1 : 1;
      currentFocus < 0 && (currentFocus = children.length - 1);
      currentFocus >= children.length && (currentFocus = 0);
    }
    children.removeClass("--focus");
    children.eq(currentFocus).addClass("--focus"); 
  }

});

那么，如果#这里没有在任何按键上注册任何函数执行，我怎么能让它识别其他任何东西呢

谁能指导我怎么做

---

继续您的示例：对不起，我使用了jQuery，我很忙。但简单地说，找到具有类的li——按下enter按钮时聚焦。然后获取该列表项的内容并对其进行处理

---

我会使用更多的jQuery。可能无法用“按键”解决您的问题。尝试改用“keydown”事件，并在其他一些元素上测试它，以排除

ul

元素的潜在问题

// Add the function to the 'ul'
$('#here').on('kedown', function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        e.preventDefault();

    var focused = $('#here .--focus');
    if( focused === undefined )  // no earlier selection, select first
        $('#here li:first').addClass('--focus');


    if( e.keyCode === 38 ) {  // up arrow
        // toggle focus class for selected element and the element above
        var previous = $(focused).prev();
        focused.toggleClass('--focus');
        previous.toggleClass('--focus');
    } else if( e.keyCode === 40 ) { // down arrow
        // toggle focus class for selected element and the element below
        var next = $(focused).next();
        focused.toggleClass('--focus');
        next.toggleClass('--focus');
    }
    // consider adding an else clause that prints a debug message to test this function
}

---

选中

，这是否意味着单击该

？@Vivek Doshi no我的意思是具有.class--focus的

元素，意思是在观察到的

元素上下导航后，我想用特定

元素的值按键盘上的enter键执行一个功能。我认为enter的键码是13，enter键的键码是13，但问题是我无法选择要应用此enter键函数的特定

元素。知道当按下enter键时如何选择特定的

元素并对其执行功能吗？我尝试了以下功能，但不起作用：

$（“#here”）。on（“keypress”，函数（e）{alert（“某些按键按下”）；}）

因此，如果#这里没有在任何按键上注册任何函数执行，我如何才能让它识别任何其他内容？

$("#here").on("keypress", function(e) { alert("some key pressed");}) 

// When ENTER is pressed
if (e.keyCode === 13) {
  e.preventDefault();
  // For each li, 
  $('li').each(function() {
    // Check it if has class "--focus"
    if($(this).hasClass('--focus')) {
      // If it does, do something with it!
      $('.product-chosen').text($(this).text())
    };
  });
};

// Add the function to the 'ul'
$('#here').on('kedown', function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        e.preventDefault();

    var focused = $('#here .--focus');
    if( focused === undefined )  // no earlier selection, select first
        $('#here li:first').addClass('--focus');


    if( e.keyCode === 38 ) {  // up arrow
        // toggle focus class for selected element and the element above
        var previous = $(focused).prev();
        focused.toggleClass('--focus');
        previous.toggleClass('--focus');
    } else if( e.keyCode === 40 ) { // down arrow
        // toggle focus class for selected element and the element below
        var next = $(focused).next();
        focused.toggleClass('--focus');
        next.toggleClass('--focus');
    }
    // consider adding an else clause that prints a debug message to test this function
}