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>

もう一度下矢印キーを押すと、2番目の項目が強調表示されます。もう一度押すと、3番目の項目が強調表示されます。

また、上向き矢印を押すと、2番目の項目が再び強調表示されます。

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 に答える