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/