1

我有一个输入框，在它下面是一个基本列表。当您在输入框中按向下箭头（或向上箭头）时，我想突出显示/更改第一个列表项的背景（就像它被选中一样）。 

<div><input id="frmartist" type="text" value=""/></div>
<ul id="artistlist">
    <li id="artist-1">artist 1</li>
    <li id="artist-2">artist 2</li>
    <li id="artist-3">artist 3</li>
    <li id="artist-4">artist 4</li>
    <li id="artist-5">artist 5</li>
</ul>

如果再次按向下箭头，则第二项将突出显示。如果再次按下，第三项将突出显示。

如果您要按向上箭头，则第二项将再次突出显示。

如何使用 jquery/javascript 控制这种行为？我猜我应该跟踪突出显示的项目，但除此之外，我想我一无所知。

我通过使用 e.which === 40 和 e.which === 38 来捕捉向上箭头和向下箭头，但我对去哪里访问列表的第一项感到困惑。

有小费吗？

4

4 回答 4

2

在变量中跟踪突出显示的艺术家的状态。然后将事件附加到监视keyup事件并查找 38 或 40 的窗口。更新突出显示的艺术家的状态，然后更新视图以反映基于关键事件的更改。

像这样，演示：http: //jsfiddle.net/9bFAb/

html:

<div><input id="frmartist" type="text" value=""/></div>
<ul id="artistlist">
 <li id="artist-1" class="highlighted">artist 1</li>
 <li id="artist-2">artist 2</li>
 <li id="artist-3">artist 3</li>
 <li id="artist-4">artist 4</li>
 <li id="artist-5">artist 5</li>
</ul>

CSS：

.highlighted{
 background-color:red;
}

js：

var artistIndex = 1;
function hightlightArtist(index){
 var selector = "#artist-" + index;
 $('.highlighted').removeClass('highlighted');
 $(selector).addClass('highlighted');
}
window.onkeyup = function(e){
  var code = e.which;
  if( code == 40 ){
    if( artistIndex < 5 )artistIndex++;
  }//up
  if( code == 38){
    if( artistIndex > 1 ) artistIndex--;
  }//down
  hightlightArtist(artistIndex);
};
于 2013-01-06T23:49:50.383 回答
2

这是一个不使用任何全局 JavaScript 状态的解决方案。这使得它比使用这种状态的解决方案更简单，因为在这里我们检查标记以找到它的当前状态。因此，该解决方案在某些方面更加稳健（没有数据冗余，不能有不同步状态）。

正如您所说，您必须跟踪当前选定的元素。但是，如果您使用专用的 CSS 类进行突出显示，则 CSS 类本身可以用作指示当前突出显示的元素的标记。

以下分别用于上下移动的函数应该可以解决问题。只需从每个按键处理程序中调用正确的处理程序。当前突出显示的列表项假定具有 CSS 类highlighted。我使用了一个辅助函数moveBy来实现最大的代码重用。

已编辑：使用 jQuery 重写了示例index，以实现对向上、向下页面等的更直接的支持。

var moveUp = function(list) { moveBy(-1, list); };
var moveDown = function(list) { moveBy(+1, list); };
var pageUp = function(list) { moveBy(-10, list); };
var pageDown = function(list) { moveBy(+10, list); };
var first = function(list) { moveBy(-$(list).children().length, list); };
var last = function(list) { moveBy(+$(list).children().length, list); };


var moveBy = function(delta, list) {
    list = $(list);
    var count = list.children().length;

    var current = list.children('.highlighted');
    if (!current.length) {
        // There are no highlighted items.
        // Highlight the first or the last, depending on whether
        // delta is up (negative), or down (positive).
        list.get(delta > 0 ? 0 : count - 1).addClass('highlighted');
    } else {
        // Find the next element according to delta. Do not wrap around.
        var nextIndex = current.index() + delta;
        nextIndex = Math.max(0, Math.min(count - 1, nextIndex));
        var next = list.get(nextIndex);

        // Switch highlighting.
        current.removeClass('highlighted');
        next.addClass('highlighted');
    }
};
于 2013-01-07T00:01:21.553 回答
1

给你的起点。向上和向下箭头都有效。如果您按下键试图越过列表的末尾或开头，它将正确环绕您可能也喜欢的。我希望它对你有帮助。

JSFIDDLE：http: //jsfiddle.net/YnpW3/2/

代码：

HTML：

<div><input id="frmartist" type="text" value=""/></div>
<ul id="artistlist">
    <li id="artist-1">artist 1</li>
    <li id="artist-2">artist 2</li>
    <li id="artist-3">artist 3</li>
    <li id="artist-4">artist 4</li>
    <li id="artist-5">artist 5</li>
</ul>

JS：

    var h = 0;
function lich()
{
  $("li").css({color: "black"});
  $("li").eq(h).css({color: "Red"});
}
lich();
$(window).on("keyup", function(e){
   if(e.keyCode == 40)
   {
       h++;
       if(h > $("li").length - 1)
       {
         h= 0;        
       }
       lich();

   }
  else if(e.keyCode ==38)
  {
       h--;
       if(h < 0)
       {
         h= $("li").length - 1;        
       }
       lich();
  }
})
于 2013-01-06T23:49:11.127 回答
1

jsBin 演示

这也会循环，它并不关心你有多少艺术家；）

var $artists = $('#artistlist li'),
    nOfArtists = $artists.length,
    curr = 0;


$artists.eq( curr ).addClass('highlight');


$(window).on('keyup', function( e ){
  var key = e.which;

  if(key == 40){
    curr++ ;
    curr = curr % nOfArtists ;
  }else if(key==38){
    curr-- ;
    if(curr === -1){
      curr = nOfArtists-1; 
    }
  }
  $artists.eq(curr).addClass('highlight').siblings().removeClass('highlight');
  
});
于 2013-01-07T00:00:24.840 回答