jquery - jQuery - 从 jQuery 函数中访问变量

Question

伙计们。我有这样的事情：

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(this.str);
        });
    }
}

myThing.setClick();

问题是当我单击按钮时，该函数不知道 str 是什么。alert(str)给我一个错误（str is not defined）并且没有警报。alert(this.str)给我警报但包含undefined.

我可以看到它this引用了按钮，并且该按钮没有任何名为str. 那么如何访问超出 jQuery 函数的 str 呢？

Answer 1

在事件处理程序之外保存对thisin的引用：setClickclick

myThing = {
    str:"my string",
    setClick: function() {
        var self = this;
        $("button").click(function() {
            alert(self.str);
        });
    }
}

演示。

Answer 2

您始终可以按名称引用对象

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(){
            alert(myThing.str);
        });
    }
}

myThing.setClick();

Answer 3

您可以使用 javascript 函数强制函数的上下文bind。我发现它在这种情况下很有用。this它允许您在被绑定的函数内定义 的值。

myThing = {
    str:"my string",
    setClick: function(){
        $("button").click(function(e){
            // 'this' is myThing
            // $(e.currentTarget) is the button on which the event handler was attached
        }.bind(this));
    }
}

myThing.setClick();