У меня есть такой код (я знаю, что он не будет работать в первом / левом и последнем / правом):

$(document).keydown(function(e) {
  if (e.which == 38) { // UP
  } else if (e.which == 40) { // DOWN
  } else if (e.which == 37) { // LEFT
    $('.selected').removeClass('selected').prev().addClass('selected');
  } else if (e.which == 39) { // RIGHT
    $('.selected').removeClass('selected').next().addClass('selected');
  }
});
ul {
  width: 200px;
  height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid gray;
  overflow: auto;
}
li {
  width: 20px;
  height: 20px;
  margin: 5px;
  float: left;
}
li.selected {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Как выбрать элемент выше при нажатии стрелки вверх и элемент ниже при нажатии стрелки вниз?

0
jcubic 10 Дек 2016 в 23:18

3 ответа

Лучший ответ
var each_row     = $("ul").width()/$("li").width();
var current_item = $("ul li.selected").index()+1;

$(document).keydown(function(e) {
    if (e.which == 38) { //UP
        $('.selected').removeClass('selected');
        current_item = current_item - each_row;
        $( "ul li:nth-child("+current_item+")").addClass('selected');
    } 
    else if (e.which == 40) { // DOWN
        $('.selected').removeClass('selected');
        current_item = current_item + each_row;
        $( "ul li:nth-child("+current_item+")" ).addClass('selected');
    }
    else if (e.which == 37) { // LEFT
        $( "ul li:nth-child("+current_item+")" ).removeClass('selected');
        current_item--; 
        $( "ul li:nth-child("+current_item+")" ).addClass('selected');
    }
    else if (e.which == 39) { // RIGHT
        $( "ul li:nth-child("+current_item+")" ).removeClass('selected');
        current_item++;
        $( "ul li:nth-child("+current_item+")" ).addClass('selected');
    }
});
ul {
  width:      200px;
  height:     200px;
  list-style: none;
  margin:     0;
  padding:    0;
  border:     1px solid gray;
  overflow:   auto;
}
li {
  width:  20px;
  height: 20px;
  float:  left;
}
li.selected {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
1
oguzhancerit 11 Дек 2016 в 21:24
var $li = $('li');

function adjustSelected ( offset ) {
  var $selected = $li.filter('.selected');
  var currentIndex = $li.index($selected);
  
  if ( currentIndex + offset > -1 && currentIndex + offset < $li.length ) {
    $selected.removeClass('selected');
    $li.eq(currentIndex + offset).addClass('selected');
  }
}

$(document).keydown(function(e) {
  if (e.which == 38) { // UP
    adjustSelected(-6);
  } else if (e.which == 40) { // DOWN
    adjustSelected(6);
  } else if (e.which == 37) { // LEFT
    adjustSelected(-1);
  } else if (e.which == 39) { // RIGHT
    adjustSelected(1);
  }
});
ul {
  width: 200px;
  height: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid gray;
  overflow: auto;
}
li {
  width: 20px;
  height: 20px;
  margin: 5px;
  float: left;
  background: #888;
}
li.selected {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
2
Taplar 10 Дек 2016 в 20:29

Здесь у вас есть чистое решение javaScript, работающее как с добавленными, так и с виртуальными узлами. Я переписываю весь код, поэтому меняю стили, значения идентификаторов и т. Д. По вашему желанию.

window.addEventListener('keydown',function(event){
  var getUl = document.getElementById('ulContainer');
  var getLi = getUl.children;
  var key = event.keyCode;
  var upDown = key===38 ? -1:key===40 ? 1:0;
  var firstLast = key===38 ? getLi.length-1:key===40 ? 0:0;
  if(key===38||key===40){
    for(var i=0;i<getLi.length;i++){
      
	  //find selected LI
      if(getLi[i].classList.contains('selected')){	
        if(getLi[i].classList.length===1){
          
          //if there is just one class, remove whole attribute class
          getLi[i].removeAttribute('class');	
          } else {
            getLi[i].classList.remove('selected');	//if there is few classes, remove 'selected' value
            }
				
        //if keyUP [i-1]
        //if keyDOWN [i+1]
        //if keyUP and first sibling [jump to last li]
        //if keyDOWN and last sibling [jump to first li]
        var getSibling = getLi[i+upDown] ? getLi[i+upDown]:getLi[firstLast];	
        getSibling.classList.add('selected');
        break;
      }
    }
  } 
});
#ulContainer>li{
  list-style-type:none;
  width:200px;
  height:25px;
  margin:5px;
  background-color:#33aaff;
}

#ulContainer>li[class="selected"]{
  background-color:#ff55aa;
}
<ul id="ulContainer">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="selected">6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>
0
Paweł 10 Дек 2016 в 21:05