[英]Changing background color on select
我已经创建了导航,可以在其中使用箭头键选择导航,但是仍然必须取消#header_search_bar_input的#header_search_bar_input
并更改用户选择的导航的背景。
网站: http : //gyazo.com/68cd4fa85a42e604a35ab25548d15235
JS:
var selected = 0;
$(window).keydown(function(e){
var lenght = $('[id^=fclink_]').length;
if(e.which === 40){
selected++;
if(selected > lenght) {
selected = 0;
}
}else if(e.which === 38){
selected--;
if(selected < 0) {
selected = lenght;
}
}else if(e.which === 13){
string = '#fclink_';
num = selected.toString();
var href = $(string.concat(num)).attr('href');
window.location.href = href;
}
if(selected == 0) {
document.getElementById('header_search_bar_input').focus();
} else {
}
});
HTML:
<li id="header_search_bar_container">
<ul id="header_search_bar">
<form action="index.php" method="post">
<input type="text" name="search_query" id="header_search_bar_input" autocomplete="off" onkeyup="autosuggest()">
<input type="submit" id="header_search_bar_submit" value="">
</form>
</ul>
<div id="header_show_auto_suggest"><a href="forecast.php?location=3" id="fclink_1">
<ul id="header_search_bar_auto_suggest" style="border-top: solid 1px #dddddd;" class="fcfocus_1">
<p id="header_search_bar_text">
Akranes, Iceland
</p>
<img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
</ul>
</a><a href="forecast.php?location=1" id="fclink_2">
<ul id="header_search_bar_auto_suggest" class="fcfocus_2">
<p id="header_search_bar_text">
Akureyri, Iceland
</p>
<img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
</ul>
</a><a href="forecast.php?location=2" id="fclink_3">
<ul id="header_search_bar_auto_suggest" class="fcfocus_3">
<p id="header_search_bar_text">
Reykjavík, Iceland
</p>
<img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
</ul>
</a></div>
</li>
请让我知道更改背景颜色的正确方法,以提供帮助。
当您在代码中使用jQuery时,以下是更改背景颜色的jQuery方法:
$("yourselector").css("background-color", "red");
注意 :HTML的结构笨拙且无效(例如:
p
和form
不应是ul
)。 尽管此解决方案适用于上面的代码,但我强烈建议您重组代码使其有效(然后重新调整下面的解决方案以使其适应新代码)。 它将更加健壮,可以避免跨浏览器问题,并且(或继承您代码的任何人)也可以更轻松地进行维护和调试。
有多种实现您想要的方法。 例如,您可以按照以下简单步骤进行操作:
active
班级。 selected
值不同于0时,将active
类添加到第nth-child(selected)
像这样(我使用自动缩进来清理它并使它更具可读性,但是它与上面的代码相同,只是添加了四行):
var selected = 0; $(window).keydown(function(e){ var lenght = $('[id^=fclink_]').length; if(e.which === 40){ selected++; if(selected > lenght) { selected = 0; } // ADDED CODE - remove the active class when up/down was pressed $("#header_show_auto_suggest a ul").removeClass("active"); }else if(e.which === 38){ selected--; if(selected < 0) { selected = lenght; } // ADDED CODE - remove the active class when up/down was pressed $("#header_show_auto_suggest a ul").removeClass("active"); }else if(e.which === 13){ string = '#fclink_'; num = selected.toString(); var href = $(string.concat(num)).attr('href'); window.location.href = href; } if(selected == 0) { document.getElementById('header_search_bar_input').focus(); } else { // ADDED CODE - add the active class to the currently active element $("#header_show_auto_suggest a:nth-child(" + selected + ") ul").addClass("active"); } });
/** ADDED CODE - Styles for active/inactive elements **/ #header_show_auto_suggest a ul { background:white; } #header_show_auto_suggest a ul.active { background:#f0f0f0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <li id="header_search_bar_container"> <ul id="header_search_bar"> <form action="index.php" method="post"> <input type="text" name="search_query" id="header_search_bar_input" autocomplete="off" onkeyup="autosuggest()"> <input type="submit" id="header_search_bar_submit" value=""> </form> </ul> <div id="header_show_auto_suggest"><a href="forecast.php?location=3" id="fclink_1"> <ul id="header_search_bar_auto_suggest" style="border-top: solid 1px #dddddd;" class="fcfocus_1"> <p id="header_search_bar_text"> Akranes, Iceland </p> <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px"> </ul> </a><a href="forecast.php?location=1" id="fclink_2"> <ul id="header_search_bar_auto_suggest" class="fcfocus_2"> <p id="header_search_bar_text"> Akureyri, Iceland </p> <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px"> </ul> </a><a href="forecast.php?location=2" id="fclink_3"> <ul id="header_search_bar_auto_suggest" class="fcfocus_3"> <p id="header_search_bar_text"> Reykjavík, Iceland </p> <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px"> </ul> </a></div> </li>
仅更改了四行代码(您可以通过它们前面的ADDED CODE
注释来识别它们)。 但是同样,您应该认真考虑重组代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.