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

HY，

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



我编写了代码，但仅适用于向上和向下箭头键，似乎不适用于向左和向右箭头键，我不知道为什么；这是我的代码

<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应用程序

感谢帮助

最佳答案

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

liSelected.prev()和liSelected.next()也将不起作用，因为当'.numberValue'项位于单独的容器中时，这将在DOM中搜索liSelected的上一个或下一个同级。

工作版本如下所示。查看演示-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');
        }
    }