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 });

正在替换内容，从而清除您正在申请的课程。

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

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

Keydown向下箭头上的JQuery下拉菜单addClass

1 个答案: