未定义的变量 jQuery 对象答案

【问题标题】：undefined variable jQuery object未定义的变量 jQuery 对象
【发布时间】：2024-01-07 16:39:01
【问题描述】：

我不明白如何将变量从 init 函数传递到对象中的 bindEvent 函数：目前，我不确定。

var Fisheye = {
    init: function () {

        $('body').hide();

        $(window).load(function() {
            $('body').fadeIn('slow');

            this.imgs = $('.pic').children('img');
            this.originalWidth = $(imgs).first().css('width');
            this.minWidth = 300;

            imgs.width(300);

            Fisheye.bindEvents();

        });

    },

    bindEvents: function() {
        $(this.imgs).toggle(this.toggleClick, this.toggleClick);
        console.log(this.imgs); // Why do I get Undefined here?
    },

    toggleClick: function() {
        //Todo
    }
}


Fisheye.init();

如何正确地将变量从函数传递到对象中的另一个？

谢谢！

【问题讨论】：

标签： javascript jquery variables undefined

【解决方案1】：

你可以这样做：

var Fisheye = {

    init: function () {
        var _this = this;
        $('body').hide();
        $(window).load(function() {
            $('body').fadeIn('slow');
            _this.imgs = $('.pic').children('img');
            _this.originalWidth = $(_this.imgs).first().css('width');
            _this.minWidth = 300;
            _this.imgs.width(300);
            _this.bindEvents();
        });

    },

    bindEvents: function() {
        $(this.imgs).toggle(this.toggleClick, this.toggleClick);
    },

    toggleClick: function() {
        //Todo
    }
}


Fisheye.init();

问题是处理程序中的“this”不是 Fisheye 的实例，而是窗口。

但是您在使用 toggleClick 时也会遇到类似的问题。解决方案可能是这样做：

bindEvents: function() {
    var _this = this;
    var toggleFunction = function(){_this.toggleClick()};
    $(this.imgs).toggle(toggleFunction, toggleFunction);
},

【讨论】：

【解决方案2】：

快速只是结构，将参数添加到函数中

 bindEvents: function(imgs) {
    $(imgs).toggle(this.toggleClick, this.toggleClick);
    console.log(imgs); // Why do I get Undefined here?
},...

关于初始化函数

...
var imgs = ..
Fisheye.bindEvents(imgs);

【讨论】：