Keydown向下箭頭上的JQuery下拉菜單addClass

我試圖讓第一個鏈接的背景在命中downarrow時變成紅色。有問題，只有按住箭頭鍵纔會變紅。它只閃爍一次紅色，然後回到白色。就好像一些事件在導致它回到默認狀態之後正好發生。我仍然在學習JQuery，所以我懷疑這是問題所在。我嘗試了一些不同的想法，但我仍然無法解決這個問題。如果任何人都可以發現我的問題，我會很感激。謝謝！Keydown向下箭頭上的JQuery下拉菜單addClass

這裏是我的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; 
}

來源

2013-06-19 zeros-and-ones

爲什麼你'''如果（$（「＃SearchInput」）VAL。（）==「」）{ $（「＃SearchInput」）。val（「」）; }''' – omarshammas

我不確定，我正在修改這段代碼，我不記得我在哪裏找到它。 –

我只是把它拿出來，沒有任何必要。 –

這可能是因爲你的AJAX調用：

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

被替換的內容，從而清除你申請的類。

幸運的是，有一個complete回調的$.load方法，所以你應該能夠做這樣的事情：

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

來源

2013-06-20 00:12:14 hamstu

仍然壞了，但感謝提示我同意我認爲.load是問題。我會繼續挖掘。 –

我更新了我的代碼，仍然存在問題 –

如果有人能幫我完成此項目，我將通過PayPal付款 –

Keydown向下箭頭上的JQuery下拉菜單addClass

回答

相關問題