this.variable = NaN inside jquery's click()

this.variable = NaN inside jquery's click()

本文关键字：click variable NaN inside jquery this      更新时间：2023-09-26

html:

<div id="mydiv">lol</div>

javascript:

var oWM = new WM();
oWM.Add("mydiv");
oWM.Initialize();
function WM() {
    this.ZIndex = 1000;
    this.Windows = [];
    this.Add = function(id) {
        this.Windows.push(id);
    }
    this.Initialize = function() {
        for (var i = 0; i < this.Windows.length; i++) {
            $("#" + this.Windows[i]).click(function () {
                alert("#"+this.id + ":" + this.ZIndex++);
                $("#" + this.id).css("z-index", this.ZIndex++);
            });
        }
    }
}

当用户单击div时，我会得到this.ZIndex的"Nan"，所以我的更改ZIndex-on-click函数不起作用。为什么它没有得到认可，我该如何让它发挥作用？

我认为这与jquery的$（）函数有关，因为this.Windows[I]在该块内也是未定义的。

http://jsfiddle.net/79sM8/

点击"lol"div，看看会发生什么

提前感谢

因为在单击事件内部，this是您单击的元素，而不是WM对象。

最简单的修复方法是提前bind点击函数的this值：

$("#" + this.Windows[i]).click(function () {
    alert("#"+this.id + ":" + this.ZIndex++);
    $("#" + this.id).css("z-index", this.ZIndex++);
}.bind(this);

EDIT-原来您想读取被单击元素的id属性，所以在这种情况下，以上内容可能不起作用，因为您仍然需要this.id来引用dom元素的id。

当然要学习如何使用function.bind，但对于这个问题，下面的解决方案就是你想要的

当然，这在IE8（没有填充程序）中是不起作用的，所以如果这是一个问题，你可以提前保存WM对象的this值，并在点击处理程序中使用

this.Initialize = function() {
    var self = this;
    for (var i = 0; i < this.Windows.length; i++) {
        $("#" + this.Windows[i]).click(function () {
            alert("#"+ this.id + ":" + self.ZIndex++);
            $("#" + this.id).css("z-index", self.ZIndex++);
        });
    }
}

单击处理程序中的变量'this'的作用域是单击的元素，而不是WM对象。您应该将WM对象缓存在单击处理程序之外。这样，您就可以在单击处理程序的范围内使用它。

var oWM = new WM();
oWM.Add("mydiv");
oWM.Initialize();
function WM() {
    this.ZIndex = 1000;
    this.Windows = [];
    this.Add = function(id) {
        this.Windows.push(id);
    }
    this.Initialize = function() {
        var that = this;
        for (var i = 0; i < this.Windows.length; i++) {
            $("#" + this.Windows[i]).click(function () {
                alert("#"+this.id + ":" + that.ZIndex++);
                $("#" + this.id).css("z-index", that.ZIndex++);
            });
        }
    }
}
jQuery事件处理程序中的this上下文设置为触发事件的DOM元素。因此，单击处理程序中的this将引用其中一个Window元素。

为了解决这个问题，您应该保留一个引用原始this作用域的局部变量，并在处理程序中使用它：

this.Initialize = function() {
    var self = this;
    for (var i = 0; i < this.Windows.length; i++) {
        $("#" + this.Windows[i]).click(function () {
            alert("#"+this.id + ":" + self.ZIndex++);
            $(this).css("z-index", self.ZIndex++);
        });
    }
}

或者，您可以使用Function.prototype.bind在事件处理程序上强制设置正确的this上下文，尽管该方法在ECMA-262中是新方法，并且尚未出现在所有浏览器中。链接的MDN页面提供了更多详细信息。

相关文章：