javascript - 我可以在第二次触发事件时执行一组不同的代码吗？

Question

我正在尝试开发一个可以通过箭头键导航的菜单，但在确定从“突出显示”第一个元素的初始事件触发器到何处时遇到了一些问题。如果你查看我的 fiddle ，你会发现第一个元素在按下右箭头键时应该突出显示(记得点击 fiddle 的主体部分!)，但我不确定从哪里开始在那里，随后的按键将循环遍历所有元素。

$(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>