JavaScriptオブジェクトのリテラル "this"キーワードjQueryコールバック引数渡し

Question

ここで何が間違っていますか？私はここで非常に不満です。私はMenu.mouseHandlerを呼び出すときに詰まっていますし、引数を渡しているので、この値を失うようです。

コード：コード付きhttp://jsfiddle.net/W6KsU/19/

var Menu = Menu || {}; 

Menu = { 
    docHeight: jQuery("document").height(), 
    menuOffset: jQuery("#menu").offset(), 
    index:0, 
    menuItem:"", 
    menuItemName:"", 
    menuItemPure:"", 
    killMenu: function() { 
     jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], function() { 
      jQuery(menuItem).unbind("mouseenter mouseleave", function() { 
       console.log("NO CLICK! DO NOTHING~"); 
      }); 
     }); 
    }, 

    initialize: function() { 
     if (jQuery.browser.ios) { 
      jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], this.touchHandler); 
     } else { 
      jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], this.mouseHandler); 
     } 
    }, 

    touchHandler: function (i, v) { 
     var _that = this, 
     this.index = i; 
     this.menuItem = v; 
     this.menuItemPure = menuItem.replace('#menu', ''); 
     jQuery(menuItem).bind("touchstart touchend", _that.onTouch); 
    }, 

    mouseHandler: function (i, v) { 
     this.index = i; 
     this.menuItem = v; 
     console.log("mouseHandler: menuItem= "+this.menuItem); 
     this.menuItemName = jQuery(this.menuItem).find("a:first img").attr("src"); 
     this.menuItemPure = this.menuItem.replace('#menu', ''); 

     console.log("menuItemName=" + this.menuItemName); 
     console.log("menuItemPure=" + this.menuItemPure); 

     jQuery(this.menuItem).bind("mouseenter", Menu.onEnter); 
     //console.log(jQuery(this.menuItem).bind("mouseenter", Menu.onEnter)) 
     //jQuery(this.menuItem).bind("mouseenter", jQuery.proxy(Menu.onEnter, Menu)); 
     jQuery(this.menuItem).bind("mouseleave", jQuery.proxy(Menu.onLeave, Menu)); 
    }, 

    onEnter: function() { 
      console.log("CALLED!"); 
     //console.log("evt= "+this); 
     //console.log("this= "+this); 
     //console.log("onEnter menuItem= " + menuItem); 
     jQuery('#menu_overlay').clearQueue().stop().css({ 
      'display': 'block' 
     }).animate({ 
      opacity: '.3' 
     }, 200).height(this.docHeight); 
     //console.log("onEnter menuItemPure= "+ menuItemPure); 
     jQuery("#megaMenu" + menuItemPure + "Div").addClass("hovering"); 
     jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Over.png").css({ 
      "z-index": "99" 
     }); 
    }, 

    onLeave: function() { 
     var _that = this; 
     console.log("onLeave= "+ menuItem); 
     var relX = Math.round(evt.pageX - this.menuOffset.left), 
      relY = evt.pageY - this.offsetTop; 
     if ((relX < 960 && relX > 0) && (relY < 41 && relY > 0)) { 
      jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering"); 
      if (menuItemName.indexOf("Stay") > -1) { 
       jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Stay.png").css({ 
        "z-index": "1" 
       }); 
      } else { 
       jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + ".png").css({ 
        "z-index": "1" 
       }); 
      } 
     } else { 
      jQuery('#menu_overlay').css({ 
       'display': 'none' 
      }).animate({ 
       opacity: '0' 
      }, 100); 
      jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering"); 
      if (menuItemName.indexOf("Stay") > -1) { 
       jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Stay.png").css({ 
        "z-index": "1" 
       }); 
      } else { 
       jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + ".png").css({ 
        "z-index": "1" 
       }); 
      } 
     } 
    }, 

    onTouch: function() { 
     jQuery('#menu_overlay').clearQueue().stop().hide().css({ 
      'display': 'block' 
     }).animate({ 
      opacity: '.3' 
     }, 200).height(this.docHeight); 
     jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering").addClass("hovering"); 
     jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Over.png").css({ 
      'z-index': '99' 
     }); 
    } 
} 

Menu.initialize(); 

Answer 1

、thisは、あなたが最初の引数として渡す配列の現在の項目の値を参照する必要があります。あなたはthisがMenuを参照したい場合は、試してみてください。

jQuery.each(

    [ 

    '#menuApplyForCredit', 

    '#menuBuyOrLease', 

    '#menuVehicleProtection', 

    '#menuCommercialFinancing', 

    '#menuFinanceTools' 

    ], 

    jQuery.proxy(this.mouseHandler, this) 

); 

jQuery.each() docsを参照してください。

配列の場合、コールバックには毎回配列インデックスと対応する配列値が渡されます。 （値もthisキーワード

介してアクセスされ、jQuery.proxy()のjQuery.proxy(function, context)バージョンのドキュメントを見ることができる