jquery - jQuery keyup 改变了颜色，但之后它又变成了原来的颜色

Question

我正在尝试更改当前选定的颜色，使用键盘的向上键和向下<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/

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