Question

我有一个<li>无序列表，其中包含动态填充的<ul id="here"> <li>Product1</li> <li>Product2</li> <li>Product3</li> <li>Product4</li> <li>Product5</li> <li>Product6</li> </ul>列表元素，并使用JQuery .ajax函数从数据库中获取数据：

#here{
    position: fixed; 
    background-color: white;
    width:175px;
    height:300px;
    border: 1px solid grey;
    display:none;   
    padding:0px 0px 10px 10px;
}
#here li:hover {
  background: #ccc;
  cursor: pointer;
}

我可以使用以下css代码悬停在这些上面：

<li>

为填充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); }元素而编写的Javascript和JQuery是：

<li>

但我需要能够使用键盘上下键在这些wire [15:0] a;元素中上下移动。任何人都可以指导我如何做到这一点？

Answer 1

使用CSS帮助程序类FIELD-SYMBOLS: <gt_data> type table, <fs_value> type any. ASSIGN gref_data->* to <gt_data>. LOOP AT <gt_data> ASSIGNING <fs_value>. write:<fs_value>. "Here you will get row by row ENDLOOP.：

--focus

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);
}

var currentFocus;

$(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"); 
  }

});

#here {
  background-color: white;
  width: 175px;
  height: 300px;
  border: 1px solid grey;
  padding: 0px 0px 10px 10px;
}
#here li:hover,
#here li.--focus {
  background: #ccc;
  cursor: pointer;
}

Answer 2

你可以尝试类似的东西 -

为了使li具有焦点，它应该有一个tabindex。

您可以为ul li

上的点击添加事件监听器

var pr= ['Product1', 'Product2', 'Product3', 'Product4', 'Product5', 'Product6'];
$("#here").append(
    pr.map(function(product){
        return $('<li tabindex="0">'+product+'</li>')
    })).on('keydown','li', function(e) {
        if (e.keyCode == 40) {        
            $(this).next().focus();
        }
        if (e.keyCode == 38) {        
            $(this).prev().focus();
        }
});

如何使用向上或向下键在动态填充的li元素之间导航

2 个答案: