Question

我有一组按钮，您可以使用左右箭头键进行导航，但是我也尝试实现上下键的按下，但是添加.prev（-3）似乎不起作用，所以我只是想知道是否有可能做到这一点？

我已经测试了我在here做的事情

$(document).keydown(
    function(e)
    {    
        if (e.keyCode == 39) {      
            $("button:focus").next().focus();

        }
        if (e.keyCode == 37) {      
            $("button:focus").prev().focus();

        }

      if (e.keyCode == 40) {      
            $("button:focus").next(+3).focus();

        }
      if (e.keyCode == 38) {      
            $("button:focus").prev(-3).focus();

        }
    }
);

Answer 1

Working fiddle 。

我将nextAll和prevAll与eq结合使用：

$("button:focus")
  .nextAll() // get all following siblings
  .eq(2);    // get third from the set (zero based)


$("button:focus")
  .prevAll() // get all previous siblings
  .eq(2);    // get third from the set (zero based)

Answer 2

jquery不支持Prev（number），但是您可以多次调用它，请参见下面的代码

$(document).keydown(
    function(e)
    {    
        if (e.keyCode == 39) {      
            $("button:focus").next().focus();

        }
        if (e.keyCode == 37) {      
            $("button:focus").prev().focus();

        }

      if (e.keyCode == 40) {      
            $("button:focus").next().next().next().focus();

        }
      if (e.keyCode == 38) {      
            $("button:focus").prev().prev().prev().focus();

        }
    }
);

working Code

Answer 3

我曾经这样做，但是我改成了Fiddle

我更喜欢使用tabindex

我数数我的按钮，输入并选择
我每个人都向他们添加了tabindex
最后我将其重点放在索引上

let el=$('button');
for(var i = 1; i<=el.length; i++){
  el.eq(i-1).attr('tabindex',i);
}	

$('button').unbind().on('keydown', function(event) {
  let currentTabIndex = $(this).attr('tabindex');
  let el = $('button');
  switch (event.which) {
    case 38:
      currentTabIndex = parseInt(currentTabIndex) - 1;
      if (currentTabIndex == 0) {
        $("[tabindex=" + el.length + "]").focus()
      } else {
        $("[tabindex=" + currentTabIndex + "]").focus()
      }
      break;
    case 13:
    case 40:
      currentTabIndex = parseInt(currentTabIndex) + 1;
      if (currentTabIndex == el.length+1) {
        $("[tabindex=" + 1 + "]").focus()
      } else {
        $("[tabindex=" + currentTabIndex + "]").focus()
      }
      break;
  }
});

button:focus{
  border:1px solid red;
  background:yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button> 
<button>3</button>
<button>4</button>
<button>5</button> 
<button>6</button>
<button>7</button>
<button>8</button> 
<button>9</button>

您需要的是在选择器

上选择按钮

你能做.prev（）减去数字吗

3 个答案: