jQueryのメニュー画像は、問題の

Question

ウェブサイトを制御します。メニューコード：

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

ここには2つの要素があります。まず、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関数。 keypressイベントが正しい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(); 
    } 
}); 

長い答え：抽象を、冪等メソッドを使用して、私はここで使用される戦略の完全な荒廃を与えるために、後で戻ってきます。