0

ユーザーが矢印キーで移動できるようにするページに2つのdivがあります。フォーカスを使用してそれらを区別しようとしましたが、（入力などの）項目が多すぎるとフォーカスを取得できます。現在、divをクリックすると、点線の付いた「フォーカスされた」cssスタイルを適用して目立たせ、他のdivからスタイルを削除しています。

.focused{
  border: 1px dashed #cccccc;   
}


$('#tagCommon').click(function(){
  $(this).focus().addClass("focus2");
  $('#tagLatin').removeClass("focus2");
});

これはキーアップイベントを傍受するのに役立つと思います。

では、focus2のクラスを持つオブジェクトだけを移動するにはどうすればよいですか？何かのようなもの：

$(document).keydown(function(e) {
    switch (e.which) {
    case 37:
        $('only the div that has class focus2').stop().animate({
            left: '-= 10'
        }); //left arrow key
        break;
    }
});

もう一度私を救い出してくれてありがとう、トッド

4

1 に答える 1

4

まだ解決策が必要かどうかはわかりませんが、これをチェックできます: http://jsfiddle.net/ft2PD/41/

ここにhtmlがあります

<div id='div1'>
    <input type='text' value='hello' />
</div>

<div id='div2'>
    <label> World</label>
</div>

</p>

ここにJavaScriptがあります：

$(document).ready(function(){
    $('#div1,#div2').click(function(){
        $('div.selected').removeClass('selected');
        $(this).addClass('selected');

    })}).keyup(function(e){
        var div = $('div.selected');
        console.log(div);
        console.log(e.which);            
        switch (e.which) {
    case 37:
        $(div).stop().animate({
            left: '-=10'
        }); //left arrow key
        break;
    case 38:
        $(div).stop().animate({
            top: '-=10'
        }); //up arrow key
        break;
    case 39:
        $(div).stop().animate({
            left: '+=10'
        }); //right arrow key
        break;
    case 40:
        $(div).stop().animate({
            top: '+=10'
        }); //bottom arrow key
        break;
    }
    });​

そして最後のCSS

#div1
{
    position: absolute;
    width:100px;
    height:100px;
    margin:15px;
    padding:15px;
    border: thin solid #D2D2D2;
}
#div2
{
    position: absolute;
    width:50%;
    margin:15px;
    padding:15px;
    border: thin solid #D2D2D2;
}
.selected
{
    border: 1px dashed #cccccc !important;
}​
于 2012-06-15T00:48:55.673 に答える