Question

我已编写代码以显示页面上的一些元素列表。另外，我已经编写了javascript代码来切片元素。所以我的页面最初有5个元素显示，每次用户点击显示更多链接，然后显示另外5个元素。我的问题是当我点击showmore时我想关注列表的第6个元素，同样也是11,16等等。目前，我没有关注列表中的第6个元素。

这是一个片段：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('ul li:gt(6)').hide();
  $('#showMore').click(function() {
    $('#payment li:hidden').slice(0, 5).css("display", "list-item");
    $('#payment li:visible:last').focus();

    // To illustrate that the last LI gets selected properly
    $('#payment li:visible:last').css({"background" : "red"}); 


  }); 
});
</script>

<title>Page Title</title>
</head>
<body>
<ul id="payment">
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
  <li>xyz</li>
</ul>

 <li id="showMore" >
    <a href="javascript:;" >Show More</a>
  </li>  
</body>
</html>

由于

Answer 1

好吧，我不知道你是如何创建/填充<li>的，但是使用javascript来关注项目，你会使用：

document.getElementById("showMore").onclick = function focus(){
    document.getElementByClassName("li.item").focus();
}

'。item'将是一个为你想要的每个<li>定义的类（第6,11等）。

要定义该类，这取决于您如何创建/填充它们

Answer 2

我确实更改了您的HTML以显示UL之外的按钮，但您应该根据自己的需要改变它，可能会定义不是带有类的按钮的列表项，并将其包含在选择器中

https://jsfiddle.net/wfL61L8o/7/

HTML

<ul id="payment">
  <li>xyz 1</li>
  <li>xyz 2</li>
  <li>xyz 3</li>
  <li>xyz 4</li>
  <li>xyz 5</li>
  <li>xyz 6</li>
  <li>xyz 7</li>
  <li>xyz 8</li>
  <li>xyz 9</li>
  <li>xyz 10</li>
  <li>xyz 11</li>
  <li>xyz 12</li>
  </ul>

  <ul>
    <li id="showMore" aria-expanded="true">
      <a href="javascript:;" role="link">${text.paymentMethod.showMore}</a>
    </li>
  </ul>

JAVASCRIPT

$(function() {

  if ($('#payment li').length <= 6) {
    $('#showMore').hide();
  }

  for(var i = 0; i < $('#payment li').length; i++) {
    if(i > 5) {
        $('#payment li').eq(i).hide()
    }    
  }  

  $('#showMore').click(function() {
    $('#payment li:hidden').slice(0, 5).css("display", "list-item");
    $('#payment li:visible:last').focus();

    // To illustrate that the last LI gets selected properly
    $('#payment li:visible:last').css({"background" : "red"}); 


  }); 

});

Answer 3

也许我说的很明显，但是<li>元素本身并不是可聚焦的。如果您想以编程方式将焦点移至<li>，则必须具有tabindex='-1'。

<li tabindex='-1'>xyz</li>

现在focus（）方法应该可以工作。

如何在Javascript中设置焦点列表元素？

3 个答案: