jQuery如何在原型中调用方法

jQuery how to call a method within a prototype?

本文关键字：调用 方法 原型 jQuery      更新时间：2023-09-26

jQuery:

    function Morphing( button, container, content) {
    this.button = button;
    this.container = container;
    this.content = content;
    this.overlay = $('div.overlay');
}
Morphing.prototype.startMorph = function() {
    this.button.on('click', function() {
        $(this).fadeOut(200);
        Morphing.containerMove();
        // Work on from here!
        // setTimeout(Morphing.containerMove, 200);
    });
};
Morphing.prototype.containerMove = function() {
    console.log(this);
    this.overlay.fadeIn();
    this.container.addClass('active');
    this.container.animate(Morphing.endPosition, 400, function() {
            this.content.fadeIn();
            this.span.fadeIn();
            Morphing.close();
    });
};

当点击按钮时，我试图运行containerMove函数，但我收到了错误：

[Error] TypeError: undefined is not a function (evaluating 'Morphing.containerMove()')
    (anonymous function) (newScript.js, line 11)
    dispatch (jquery.min.js, line 3)
    i (jquery.min.js, line 3)

这是唯一的错误。我想这是因为我错误地调用了该方法？谢谢

顺便说一句：原型中的写作方法是否像我所做的那样是一个很好的练习？

额外代码：

忘了提，这是在我的index.html:

<script>
$(document).ready(function() {
    var morph = new Morphing( $('button.morphButton'), $('div.morphContainer'), $('h1.content, p.content') );
    morph.startMorph();
});
</script>

最简单的方法是将原始this存储在闭包中

Morphing.prototype.startMorph = function() {
    var me = this;
    this.button.on('click', function() {
        $(this).fadeOut(200);
        me.containerMove();
        // Now for the set timeout, you'll want to make sure it's
        // called with the corect `this`, You can use Function.bind
        // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
        setTimeout(me.containerMove.bind(me), 200);
    });
};

在事件处理程序中，this指向元素本身，正如您从调用$(this).fadeOut(200);但需要访问处理程序之外的this这一事实中所理解的那样。

相关文章：