Question

我有这样的代码（我知道它不适用于第一个/左边和最后一个/右边）：

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

当我按下箭头时按下箭头和下面的项目时，如何选择上面的项目？

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

 while(1) {
     char *memory = VirtualAlloc(NULL, page_size * 2, MEM_RESERVE, 0);
     VirtualFree(memory);
     if (MapViewOfFileEx(handle1, FILE_MAP_WRITE, 0, 0, page_size, memory) == NULL
         && GetLastError() == ERROR_INVALID_ADDRESS) {
         continue;
     }
     if (MapViewOfFileEx(handle2, FILE_MAP_WRITE, 0, 0, page_size, memory + page_size) == NULL
         && GetLastError() == ERROR_INVALID_ADDRESS) {
         UnMapViewOfFile(memory);
         continue;
     }
     break;
}

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

Answer 3

这里你有纯javaScript解决方案，适用于附加节点和虚拟节点。我重写了所有代码，因此可以根据需要更改样式，id值等。

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>

如何知道哪个项目在上面以及哪个项目在所选项目下面？

3 个答案: