Question

我在这里做错了什么？我在这里非常沮丧。当我调用Menu.mouseHandler时，我被卡住@并且由于它被传递了一个参数，它似乎失去了它的价值？

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 )版本的文档。

JavaScript Object Literal“this”关键字jQuery Callbacks Argument Passing

1 个答案: