左右箭头键对我不起作用

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's previous or next sibling in the DOM while your '.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');
        }
    }

左右箭头键对我不起作用

right and left arrow keys does not work for me

javascript

jquery

arrow-keys

meteor