jQuery 菜单图像与键盘控件交换

Question

有问题的网站：

http://harrisonfjord.com/folio2/

如您所见，有一个菜单底部使用 jquery scrollTo 来上下移动页面。菜单代码是：

<ul id="menu" style="list-style:none">
        <li><a href="#" class="current" onclick="jQuery.scrollTo('#home', 1000 )"><img class="hoverImage" src="img/home_highlight.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#asics', 1000 )"><img class="hoverImage" src="img/asics.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#tooheys', 1000 )"><img class="hoverImage" src="img/tooheys.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#olympics', 1000 )"><img class="hoverImage" src="img/olymp.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#panadol', 1000 )"><img class="hoverImage" src="img/panadol.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#plants', 1000 )"><img class="hoverImage" src="img/plantsplus.png"/></a></li>
        <li><a href="#" onclick="jQuery.scrollTo('#kia', 1000 )"><img class="hoverImage" src="img/kia.png"/></a></li>
    </ul>

这里有两个元素在起作用。首先，单击 li.a 使用scrollTo 在页面上上下移动。其次，将鼠标悬停/单击图像会切换“_highlight.png”源更改，如下所示：

// MENU HOVER IMAGE:
$(function () { 
    $('img.hoverImage').mouseover(function () {
        if ($(this).is('.activeImage')) return;
        var src = $(this).attr("src").match(/[^\.]+/) + "_highlight.png";
        $(this).attr("src", src);
    }).mouseout(function () {
        if ($(this).is('.activeImage')) return; // Skip mouseout for active image
        var src = $(this).attr("src").replace("_highlight", "");
        $(this).attr("src", src);
    }).click(function () {
        // remove previous active state
        $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
        // set new active state
        $(this).addClass('activeImage');
    });
});

这一切都正常。然而，当我尝试向页面添加键盘控件时，整个事情就崩溃了。我想使用向上/向下箭头移动到上一个/下一个菜单项，它使用以下代码：

// Add "current" class to #menu links when clicked

$("#menu a").click(function(e) {
    $(".current").removeClass("current");
    $(this).addClass("current");    
});


// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document.documentElement).keyup(function (event) {
  // handle cursor keys
  if (event.keyCode == 38) {
    // go up
    $("a.current")
      .parent() // moves up to the li element
      .prev() // moves to the adjacent li element
      .find("a") // moves down to the link
      .click(); // triggers a click on the previous link
  } else if (event.keyCode == 40) {
    // go right
    // same as above, but just on one line and next instead of prev
    $("a.current").parent().next().find('a').click();
  }
});

这可以工作，但是（显然）这会触发单击事件，该事件无法成功切换 _highlight.png 函数。更改代码以便按键事件不仅滚动到正确的 div，而且突出显示/取消突出显示正确的菜单项的最佳方法是什么？

Answer 1

简短的，几乎需要更多的工作，答案：

$(function() {
  function highlight(e) {
    var _this = $(this),
        src = _this.attr("src").replace("_highlight", "").slice(0, -4) + "_highlight.png";

    _this.attr("src", src);
  }

  function refresh() {
    $("#menu a img").each(function(e) {
      var _this = $(this),
          src = _this.attr("src").replace("_highlight", "");

      _this.attr("src", src);
    });

    highlight.call($("#menu a.current img"));
  }

  function scroll(item) {
    jQuery.scrollTo(item, 1000);

    // Add "current" class to appropriate link
    $("#menu a").removeClass("current");

    var link = $("#menu a[href=" + item + "]");
    link.addClass("current");

    refresh();
  }

  $("#menu a").click(function(e) {
    // Pull the hash URI from the href.
    scroll($(this).attr('href'));
  }).find("img").hover(highlight, refresh);
});

// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD

$(document).keyup(function(e) {
  var p = $("a.current").parent();
  if (e.keyCode === 38) {
    p.prev().find("a").click();
  } else if (e.keyCode === 40) {
    p.next().find('a').click();
  }
});

较长的答案：抽象，使用幂等方法，我稍后会回来给出此处使用的策略的完整概要。