在選擇時更改背景顏色

Question

我已經創建了導航，可以在其中使用箭頭鍵選擇導航，但是仍然必須取消#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>

請讓我知道更改背景顏色的正確方法，以提供幫助。

Answer 1

當您在代碼中使用jQuery時，以下是更改背景顏色的jQuery方法：

$("yourselector").css("background-color", "red");

Answer 2

注意 ：HTML的結構笨拙且無效（例如： p和form不應是ul ）。 盡管此解決方案適用於上面的代碼，但我強烈建議您重組代碼使其有效（然后重新調整下面的解決方案以使其適應新代碼）。 它將更加健壯，可以避免跨瀏覽器問題，並且（或繼承您代碼的任何人）也可以更輕松地進行維護和調試。

有多種實現您想要的方法。 例如，您可以按照以下簡單步驟進行操作：

• 創建兩個CSS規則：
  • 一種用於選項未激活時（帶有白色背景）
  • 該選項處於活動狀態時的另一個信息（例如，灰色背景）
• 修改您的JavaScript代碼，以便：
  • 選擇上/下鍵時，刪除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注釋來識別它們）。 但是同樣，您應該認真考慮重組代碼。