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/

jQuery keyup改变了颜色，但之后它再次改变为原始颜色

1 个答案: