right and left arrow keys does not work for me

Question

Hy,

I want to add the ability for players to navigate between the four numbers in the photo using their arrow keys with cross-browser compatibility;

I write the code, but works only with up and down arrow keys, it seems not work with left and right arrow keys, I dont why; here my code

<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>

and my js is

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

  });

Am I doing something wrong above ??

knowing that it's a Meteorjs application

Thank's for help

Answer 1

Your main problem is that var liSelected; should look like var liSelected = li.filter('.selected'); because otherwise it will never get initialized.

Also liSelected.prev() and liSelected.next() will not work because this will search for the liSelected's previous or next sibling in the DOM while your '.numberValue' items are within separate containers.

The working version would look like below. Check demo - 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');
        }
    }