左，右箭頭鍵不工作對我來說

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'); 
     } 
    }