JQuery 下拉菜单 addClass on Keydown 向下箭头

Question

我试图让第一个链接的背景在按下向下箭头时变为红色。有点不对劲，如果你按住箭头键，它只会变成红色。它只是闪烁红色一次，然后变回白色。就好像某些事件正在导致它恢复到默认状态后立即发生。我还在学习 JQuery，所以我怀疑这就是问题所在。我尝试了很多不同的想法，但我仍然无法弄清楚这个。如果有人能发现我的问题，我将不胜感激。谢谢!

这是我的 JQuery:

 <script type="text/javascript">
$(document).ready(function() {

$(document).click(function() {
    $("#SearchResults").hide();
});

$("#SearchInput").keydown(function(e) {
if(e.which == 8) {
SearchText = $("#SearchInput").val().substring(0, $("#SearchInput").val().length-1);
} else if (e.keyCode == 40) { //down
var curr = $("#SearchResults").find("a.selected");
if (curr.length == 0) {
    curr = $("#SearchResults").find("a:first");
}

} else {    
SearchText = $("#SearchInput").val() + String.fromCharCode(e.which);
}


$('#SearchResults').load('/ajaxPHP/ajaxSearch.php',{ SearchInput: SearchText }, function() {
curr.addClass('selected');
});
$("#SearchResults").slideDown();

});
});
</script>

Here is my CSS
#SearchInput {   
width:340px; 
height:24px; 
margin-top:15px; 
border:none; 
padding-left:12px; 
padding-right:10px; 
color:#333;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-repeat: no-repeat;
background-color:#fff; /* Fallback */
-moz-box-shadow: inset 0 2px 1px 1px #363636;
-webkit-box-shadow: inset 0 2px 1px 1px #363636;
box-shadow: inset 0 2px 1px 1px #363636;
}

#SearchResults {
float:left;    
position:fixed !important;
background: #fff;
border:1px solid #333;
display: none;

width: 360px;
z-index: 9999 !important;
top:40px;
max-height:420px;
color:#333;
margin-left:9px;
}

#SearchResults h1 {
display: block;
padding: 10px 5px 10px 15px;
font-size:13px;
font-weight:bold;
color:#333;
border-top:1px solid #999;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

#SearchResults a {
z-index: 9999 !important; 
color: #333;
font-size:13px;
display: block;
padding: 15px 5px 15px 15px;
text-decoration: none;
}

#SearchResults a:hover {
z-index: 9999 !important; 
color: #fff;
background: #999;
text-decoration: underline;
}

Answer 1

很可能您的 AJAX 调用:

$("#SearchResults").load("/ajaxPHP/ajaxSearch.php", { SearchInput: SearchText });

正在替换内容，从而清除您正在申请的类(class)。

幸运的是，$.load 方法有一个complete 回调，所以您应该可以这样做:

$("#SearchResults").load("/ajaxPHP/ajaxSearch.php", { SearchInput: SearchText },
  function(response, status, xhr) {
    curr.addClass('selected');  
});