Question

所以我有一个li行的列表，每个行包含按钮。我已经设置好了，所以我可以使用上下键向下滚动li行，并使用左右键向下滚动按钮。但是我似乎无法弄清楚如何在每次选择新行时使其聚焦于第一个按钮。因此，例如，我向下滚动行，每次滚动到新行时，该行中的第一个按钮应该已被选中。

每次按下时我都添加了$("button").first().focus();，但是它只聚焦所有按钮中的第一个按钮，而不是当前行的第一个按钮。

这是使用jsbin

的完整代码

button:focus { background:yellow; }
li.selected {background:red}
ul { list-style-type: none; }

<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li> 


    let el=$('button');
    for(var i = 1; i<=el.length; i++){
      el.eq(i-1).attr('tabindex',i);
    }   

    var li = $('li');
    var liSelected;
    $(window).keydown(function(e){

        if(e.which === 40){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.next();

        //Focus button 
        $("button").first().focus();

                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.eq(0).addClass('selected');
                }
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else if(e.which === 38){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if(next.length > 0){

                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.last().addClass('selected');
                }
            }else{
                liSelected = li.last().addClass('selected');
            }
        }
    });

    $('button').on('keydown', function(event) {
      let currentTabIndex = $(this).attr('tabindex');
      let el = $('button');


    //Focus on categories if at top and up is pressed

      switch (event.which) {
        case 37:
          currentTabIndex = parseInt(currentTabIndex) - 1;
          if (currentTabIndex == 0) {
            $("[tabindex=" + el.length + "]").focus()
          } else {
            $("[tabindex=" + currentTabIndex + "]").focus()
          }
          break;

        case 39:
          currentTabIndex = parseInt(currentTabIndex) + 1;
          if (currentTabIndex == el.length+1) {
            $("[tabindex=" + 1 + "]").focus()
          } else {
          $("[tabindex=" + currentTabIndex + "]").focus()
          }
          break;
      }

    });

Answer 1

假设您想在每次用户向上/向下按下时选择第一个按钮，则代码为

$(window).keydown(function(e){
    var callabackFunction = function (){

  if(liSelected && liSelected.find('button')[0]){
    liSelected.find('button')[0].focus();
  }
    }
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();


            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
      callabackFunction();
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){

                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
      callabackFunction();
    }



});

编辑：- 编辑了代码，就可以了。仍然，如果要选择当前行，则需要为其编写逻辑。

jQuery如何将第一个按钮集中在lidown键上

1 个答案: