Javascript OOPS错误

Question

您好我正在使用面向对象的javascript并使用jquery动画。我是OOP Javascript的新手。我收到错误“TypeError：this.setUpAd不是函数”。我试图调用一个按钮事件，但收到此错误。

init: function () {
        this.mainContainer = '#' + this.config.mainContainer;
        this.intro_image = '#' + this.config.intro_image;
        this.text1 = '#' + this.config.text1;
        this.text2 = '#' + this.config.text2;
        this.text3 = '#' + this.config.text3;


        $("#mainContainer").click(function () {
            this.setUpAd();
        });
    },


    bannerAnimation: function () {

        //Jquery Animation
        var text1 = this.text1;
        var text2 = this.text2;
        var text3 = this.text3;
        $(this.intro_image).animate({ width: "120px",
            height: "140px"
        }, 1000);
        $(text1).animate({ left: "20" }, 500, function () {
            $(text1).animate({ left: "10" }, 200);
            $("#btn2").animate({ left: "10" }, 200);
        });

        setTimeout(function () {
            $(text2).animate({ left: "20" }, 500, function () {
                $(text3).animate({ left: "20" }, 500, function () {
                    $(text3).animate({ left: "10" }, 200);
                });
                $(text2).animate({ left: "10" }, 200);
            });
        }, 1000);
    },
    // Handle Ad Setup



    setUpAd: function() {
  this.d("click").addEventListener('click', function (e) { EB.clickthrough(); }, false);

}

或者有更好的方法来编写按钮点击代码。谢谢

Answer 1

在点击处理程序的上下文中，this与您的init()函数不同。

您可以将值分配给变量并使用：

init: function () {
    var me = this;

    this.mainContainer = '#' + this.config.mainContainer;
    this.intro_image = '#' + this.config.intro_image;
    this.text1 = '#' + this.config.text1;
    this.text2 = '#' + this.config.text2;
    this.text3 = '#' + this.config.text3;

    $("#mainContainer").click(function () {
        me.setUpAd();
    });
},