Question

所以我需要通过Jquery事件获取给定元素的内部文本，然后将此文本设置为我的类的成员，例如。

myClass = function ()
{
    this.index = 0;

    this.onNavElementClick = function ()
    {
        this.index = parseInt(this.text());
    }

    this.myMain = function ()
    {
        $("nav#wow-so-much-inspiration").on("click", "a", this.onNavElementClick);
    }
}

myObject = new myClass();
myObject.myMain();

HTML：

<nav id="wow-so-much-inspiration">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</nav>

但由于onNavElementClick()函数中有两个不同的范围，这不起作用......我不喜欢做_this = this的想法，我很确定有一个没有进行MacGyver编码的正确方法。

Answer 1

jQuery事件处理程序还将事件对象（包括触发事件的target）作为第一个参数。然后，您可以使用$.proxy将事件处理程序绑定到外部this。

这样的事情：

this.onNavElementClick = $.proxy(function (e)
{
    this.index = parseInt($(e.target).text());
}, this);

Answer 2

您可以使用bind方法，但我相信这已被证明具有轻微的性能影响。

示例 - 本质上是$ .proxy答案的作用。

var myClass = function ()
{
    this.index = 0;

    this.onNavElementClick = (function (event) {
        this.index = parseInt( $(event.target).text() );
    }).bind(this);

    this.myMain = function ()
    {
        $("nav#wow-so-much-inspiration").on("click", "a", this.onNavElementClick);
    };
}

var myObject = new myClass();
myObject.myMain();

另一个选择是使用简单的包装函数call或apply。

var myClass = function ()
{
    this.index = 0;

    this.onNavElementClick = function (event)
    {
        this.index = parseInt( $(event.target).text() );
    };

    this.myMain = function ()
    {
        var self = this;
        $("nav#wow-so-much-inspiration").on("click", "a", function (event) {
            self.onNavElementClick.call(self, event);
        });
    };
}

var myObject = new myClass();
myObject.myMain();

Answer 3

将onNavElementClick定义为my类构造函数中的var，并根据需要重用该函数。

<div onclick="dingo()">click me</div>
<div onclick="alert(this)">click me 2</div>

<script type="text/javascript">
function dingo()
{
    alert("hi");
}
</script>

如何在一个函数中使用两个不同的范围“this”？

3 个答案: