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

【问题标题】：Can I execute a different set of code on the second time an event is triggered?我可以在第二次触发事件时执行一组不同的代码吗？
【发布时间】：2016-07-31 07:26:04
【问题描述】：

我正在尝试开发一个可以从箭头键导航的菜单，并且在确定从“突出显示”第一个元素的初始事件触发器到何处时遇到了一些麻烦。如果您查看我的小提琴，您会发现当按下右箭头键时第一个元素会突出显示（请记住单击小提琴的主体部分！），但我不知道从哪里开始在那里，以便后续按键将循环遍历所有元素。

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

感谢任何提示和反馈，即使它使代码朝着完全不同的方向发展！

【问题讨论】：

标签： javascript jquery events triggers keydown

【解决方案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>

【讨论】：

【解决方案2】：

按下箭头时，您可以检查当前活动的菜单项，删除其突出显示的样式并将它们添加到下一项。

像这样：

  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/

【讨论】：

【解决方案3】：

需要一些标志

$(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;
        }
       }
     });
});

【讨论】：