0

キーボードのキーアップとキーダウン<tr>でナビゲートして、現在選択されている色を変更しようとしています。

ショーはAjaxリクエストの結果であり、結果はn行のテーブルです。各行はショーの名前です。（検索するために）入力フィールドの下にテーブルを置きます。

入力フィールド：

<form action="/Search" method="post">
    <input id="search" class="search-input" type="text" name="query" title="Search" autocomplete="off">
</form>
</div>

結果の表：

<div id="search_results"><table class="autocomplete">
<tbody>
    <tr>
        <td><a href="/Shows/Details/Breaking%20Bad">Breaking Bad</a></td>
    </tr>
    <tr>
        <td><a href="/Shows/Details/Prison%20Break">Prison Break</a></td>
    </tr>
</tbody></table></div>

行の色を変更するために使用しているコードは次のとおりです。

$("#search").keyup(function (e) {
                    if (e.which == 40) {
                            $("#search_results tr:nth-child(1)").css("background", "#D6D6FF");
                    }
                });

問題は、色が変わるのに、1秒後に元の色に変わることです。私はいくつかの例を見ました、そして私はこれがうまくいくはずだと思います。

http://jsfiddle.net/cnq4u/

4

1 に答える 1

1

ねえ、私はそれを手に入れたと思います。

var currentChild = 0;

$("#search").keyup(function(e) {
    if (e.which == 40) {
        if ($("#search_results tr:nth-child(" + currentChild+++")").length == 0) currentChild = 1;
        $("#search_results tr").css("background", "");

        $("#search_results tr:nth-child(" + currentChild + ")").css("background", "#D6D6FF");
    } else if (e.which == 38) {
        if ($("#search_results tr:nth-child(" + currentChild-- +")").length == 0) currentChild++;
        $("#search_results tr").css("background", "");

        $("#search_results tr:nth-child(" + currentChild + ")").css("background", "#D6D6FF");

    }
});

jsfiddle http://jsfiddle.net/reygonzales/M6Mrf/5/

于 2012-06-18T18:37:55.203 に答える