javascript - 左右箭头键对我不起作用

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() 将不起作用，因为这将搜索 liSelected 的上一个或DOM 中的下一个兄弟，而您的“.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');
        }
    }