左右箭头键对我不起作用

Question

喂，

我想为玩家添加跨浏览器兼容性的箭头键在照片中的四个数字之间导航的功能；

我写了代码，但是只能用上下方向键，左右方向键好像不行，不知道为什么；这是我的代码

<template name="range">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="valueSliders">

<!-- Verticle Number Selector -->
<div class="verticleNumberSelect">
  <span class="firstNumber">
    <span class="up"> </span>
    <span class="numberValue" tabindex="1">0</span>
    <span class="down"></span>
  </span>
  <span class="secondNumber">
    <span class="up"></span>
    <span class="numberValue" tabindex="1">0</span>
    <span class="down"></span>
  </span>
  <span class="thirdNumber">
    <span class="up"></span>
    <span class="numberValue" tabindex="1">0</span>
    <span class="down"></span>
  </span>
  <span class="fourthNumber">
    <span class="up"></span>
    <span class="numberValue" tabindex="1">0</span>
    <span class="down"></span>
  </span>
  <input type="hidden" id="verticleNumber" />

</div>
</div>
</div>


</div>
</template>

我的js是

Template.range.events({

     'keydown .numberValue':function(e){
    if (e.keyCode == '38') {
      counter = $(e.target).text();
    if (counter < 9){
      counter++;
    numberValue = $(e.target).text(counter);
    totalNumber(); 
  }
  } else if (e.keyCode == '40') {

     counter = $(e.target).text();
    if (counter > 0){
      counter--;
    numberValue = $(e.target).text(counter);
    totalNumber(); 
  }
} else if(e.keyCode == 39){
  var li = $('.numberValue');
  var liSelected; 
        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');

        }
    }else if(e.keyCode == 37){
      var li = $('.numberValue');
      var liSelected;
        if(liSelected){
            liSelected.removeClass('selected');

            next = liSelected.prev();
            next.focus();
            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
    }
  }

  });

我在上面做错了吗？？

知道这是一个 Meteorjs 应用程序

谢谢你的帮助

Answer 1

您的主要问题是var liSelected; 应该看起来像var liSelected = li.filter('.selected');，否则它永远不会被初始化。

liSelected.prev() 和 liSelected.next() 也不起作用，因为这将在 DOM 中搜索 liSelected 的上一个或下一个兄弟，而您的 '.numberValue' 项目位于不同的容器中。

工作版本如下所示。查看演示 - Fiddle:

    } else if (e.keyCode == 39) {
        // right        
        var li = $('.numberValue');
        var liSelected = li.filter('.selected');          
        if (liSelected.length>0) {
            liSelected.removeClass('selected');
            var posSelected = li.index( liSelected );
            next = posSelected+1;
            if (next < li.length) {
                liSelected = li.eq(next).addClass('selected');
            } else {
                liSelected =li.first().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    } else if (e.keyCode == 37) {
        // left
        var li = $('.numberValue');
        var liSelected = li.filter('.selected');          
        if (liSelected.length>0) {
            liSelected.removeClass('selected');
            var posSelected = li.index( liSelected );
            next = posSelected-1;
            if (next > -1) {
                liSelected = li.eq(next).addClass('selected');
            } else {
                liSelected =li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    }