Question

我有一行可点击的div，可以向用户显示不同的输出。单击这些div时，它会相应地运行不同的函数。

<div class="modeHolder" id="visionButtons">

        <button class="modeButton" id="fourHundred" onclick="oneLetter(this); win2.increment400();">20/400</button>
        <button class="modeButton" id="threeHundred" onclick="oneLetter(this); win2.increment300();">20/300</button>
        <button class="modeButton" id="twoHundred" onclick="twoLetter(this); win2.increment200();">20/200</button>
        <button class="modeButton" id="oneHundred" onclick="threeLetter(this); win2.increment100();">20/100</button>
        <button class="modeButton" id="eighty" onclick="fourLetter(this); win2.increment80();">20/80</button>
        <button class="modeButton" id="seventy" onclick="fiveLetter(this); win2.increment70();">20/70</button>
        <button class="modeButton" id="sixty" onclick="fiveLetter(this); win2.increment60();">20/60</button>
        <button class="modeButton" id="fifty" onclick="fiveLetter(this); win2.increment50();">20/50</button>
        <button class="modeButton" id="forty" onclick="fiveLetter(this); win2.increment40();">20/40</button>
        <button class="modeButton" id="thirty" onclick="fiveLetter(this); win2.increment30();">20/30</button>
        <button class="modeButton" id="twentyFive" onclick="fiveLetter(this); win2.increment25();">20/25</button>
        <button class="modeButton" id="twenty" onclick="fiveLetter(this); win2.increment20();">20/20</button>


    </div>

我已经搜索了stackoverflow，几周前我找到了一个答案，但它正在工作，我忘了给它添加书签，我再也找不到了。我基本上想用上/下箭头键循环这些。如果用户在20/30并按“向上”，我希望主动焦点转到20/40 div。一旦到达顶部或底部，它就不必循环回来。谁能指出我正确的方向？我没有任何可行的答案，javascript / jquery，任何东西。

Answer 1

您可以在父div上收听KeyDown事件。

现在只需使用next（）或prev（）

触发点击上一个或下一个元素

$（本）.prev（）触发（ '点击'）;

Answer 2

＆＃13;

(function(){
  //get the buttons, make it an array
  var modeButtons = Array.prototype.slice.call(document.querySelectorAll('.modeButton'));
  
  function focusOnAdjacentElement (e) {
    //get the keycode
    var code = e.keyCode || e.which;
    
    //is it up or down?
    if ([38, 40].indexOf(code) > -1) {
      //if it is up, subtract one, otherwise add one
      var adjustment = (code == 38 ? -1 : 1);
      var nextIndex = (modeButtons.indexOf(e.target) + adjustment);
      
      //get min so we don't go outside the bottom bounds
      nextIndex = Math.min(nextIndex, modeButtons.length - 1);
      //get max so we do not go < 0
      nextIndex = Math.max(nextIndex, 0);
      //adjust the focus
      modeButtons[nextIndex].focus();
    }
  }
  
  modeButtons.forEach(element => element.addEventListener( 'keyup', focusOnAdjacentElement));
  
  modeButtons[0].focus();
}());

＆＃13;

<div class="modeHolder" id="visionButtons">

        <button class="modeButton" id="fourHundred" onclick="oneLetter(this); win2.increment400();">20/400</button>
        <button class="modeButton" id="threeHundred" onclick="oneLetter(this); win2.increment300();">20/300</button>
        <button class="modeButton" id="twoHundred" onclick="twoLetter(this); win2.increment200();">20/200</button>
        <button class="modeButton" id="oneHundred" onclick="threeLetter(this); win2.increment100();">20/100</button>
        <button class="modeButton" id="eighty" onclick="fourLetter(this); win2.increment80();">20/80</button>
        <button class="modeButton" id="seventy" onclick="fiveLetter(this); win2.increment70();">20/70</button>
        <button class="modeButton" id="sixty" onclick="fiveLetter(this); win2.increment60();">20/60</button>
        <button class="modeButton" id="fifty" onclick="fiveLetter(this); win2.increment50();">20/50</button>
        <button class="modeButton" id="forty" onclick="fiveLetter(this); win2.increment40();">20/40</button>
        <button class="modeButton" id="thirty" onclick="fiveLetter(this); win2.increment30();">20/30</button>
        <button class="modeButton" id="twentyFive" onclick="fiveLetter(this); win2.increment25();">20/25</button>
        <button class="modeButton" id="twenty" onclick="fiveLetter(this); win2.increment20();">20/20</button>


    </div>

＆＃13;

在javascript中使用向上/向下箭头循环显示div

2 个答案: