JavaScript Object Literal Ключевое слово "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( function, context ) версии jQuery.proxy () .