我可以在第二次觸發事件時執行另一組代碼嗎？

Question

我正在嘗試開發一個可以從箭頭鍵導航的菜單，並且在初始事件觸發器「突出顯示」第一個元素時遇到了一些麻煩。如果你看看我的小提琴，你會發現第一個元素被突出顯示，因爲它應該按下右箭頭鍵（記住點擊小提琴的主體部分！），但我不確定從哪裏開始這樣後續的按鍵將循環遍歷所有元素。

$(document).ready(function($) { 
 
    $("body").keydown(function(event) { 
 
    if (event.which == 39) { 
 
     $(".a").css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    } 
 
    }); 
 
});

.tile { 
 
    width: 100px; 
 
    height: 100px; 
 
    outline: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tile a"> 
 
    A 
 
</div> 
 
<div class="tile b"> 
 
    B 
 
</div> 
 
<div class="tile c"> 
 
    C 
 
</div>

任何提示和反饋的讚賞，即使它需要的代碼在一個完全不同的方向！

Answer 1

你應該處理所有方向鍵的事件，如下列：

$(document).ready(function($) { 
 
    var activeIndex = -1; 
 

 
    $(".tile").hover(
 
    function() { 
 
     $(this).css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    }, 
 
    function() { 
 
     $(this).css({ 
 
     "outline": "1px solid red" 
 
     }); 
 
    } 
 
); 
 

 
    $("body").keydown(function(event) { 
 
    if (event.which == 39) { 
 
     activeIndex = 0; 
 
    } else if (event.which == 38 && activeIndex != -1) { 
 
     activeIndex--; 
 
    } else if (event.which == 40 && activeIndex != -1) { 
 
     activeIndex++; 
 
    } 
 

 
    if (activeIndex < 0) { 
 
     activeIndex = 0; 
 
    } else if (activeIndex == $("#menu-container").children(".tile").length) { 
 
     activeIndex = $("#menu-container").children(".tile").length - 1; 
 
    } 
 

 
    if (activeIndex != -1) { 
 
     $("#menu-container").children(".tile").css({ 
 
     "outline": "1px solid red" 
 
     }); 
 
     $("#menu-container").children(".tile").eq(activeIndex).css({ 
 
     "outline": "3px solid red" 
 
     }); 
 
    } 
 
    }); 
 
});

.tile { 
 
    width: 100px; 
 
    height: 100px; 
 
    outline: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu-container"> 
 
    <div class="tile a"> 
 
    A 
 
    </div> 
 
    <div class="tile b"> 
 
    B 
 
    </div> 
 
    <div class="tile c"> 
 
    C 
 
    </div> 
 
</div>

Answer 2

一些標誌需要

$(document).ready(function($) { 
    var arrowPressed = false; 
    $("body").keydown(function(event){ 
     if (event.which == 39) { 
     if(!arrowPressed) { 
      $(".a").css({"outline":"3px solid red"}); 
      arrowPressed = true; 
     } 
     else { 
      $(".a").css({"outline":"none"}); 
      arrowPressed = false; 
     } 
     } 
    }); 
}); 

Answer 3

當箭頭按下您可以檢查當前活動的菜單項，刪除其highlited風格，並將其添加到下一個項目。

像這樣：

if (event.which == 39) { 
    var active_title = $('.tile.active'); 
    active_title.removeClass('active'); 
    if (active_title.length && active_title.next().length) { 
     active_title.next().addClass('active'); 
    } else { 
     $('.a').addClass('active'); 
    } 
    } 

試試吧https://jsfiddle.net/1kf34rdq/11/