Javascript this.variable=NaN在jquery'；s click（）

html:

lol

javascript:

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

var oWM=new WM（）；
oWM.添加（“mydiv”）；
初始化（）；
函数WM（）{
这个.ZIndex=1000；
这个是.Windows=[]；
this.Add=函数（id）{
此.Windows.push（id）；
}
this.Initialize=函数（）{
对于（var i=0；i

当用户单击div时，我得到了this.ZIndex的“Nan”，因此我的change ZIndex on click函数不起作用。为什么它没有被认可，我如何才能让它工作

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

点击“lol”div，看看会发生什么

---

提前感谢

因为在您的点击事件中，

这是您点击的元素，而不是WM对象

最简单的修复方法是提前绑定click函数的
这个
值：

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++);
            });
        }
    }
}


EDIT-结果表明您想要读取被单击元素的
id
属性，因此在这种情况下上述操作可能不起作用，因为您仍然需要
this.id
来引用dom元素的id

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


当然，这在IE8中不起作用（没有垫片），因此如果出现问题，您可以提前保存WM对象的
this
值，并在单击处理程序中使用该值：

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

this.Initialize=function（）{
var self=这个；
对于（var i=0；i
jQuery事件处理程序中的
这个
上下文被设置为触发事件的DOM元素。因此，单击处理程序中的
此
将引用一个
窗口
元素

为了避免这种情况，您应该保留一个引用原始
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.Initialize=function（）{
var self=这个；
对于（var i=0；i

或者，您可以使用强制在事件处理程序上设置正确的
this
上下文，尽管该方法在ECMA-262中是新的，但尚未在所有浏览器中出现。链接的MDN页面提供了更多详细信息。
单击处理程序中的变量“this”的作用域是单击的元素，而不是WM对象。您应该在click处理程序外部缓存WM对象。这样，您就可以在单击处理程序的范围内使用它

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++);
        });
    }
}

var oWM=new WM（）；
oWM.添加（“mydiv”）；
初始化（）；
函数WM（）{
这个.ZIndex=1000；
这个是.Windows=[]；
this.Add=函数（id）{
此.Windows.push（id）；
}
this.Initialize=函数（）{
var=这个；
对于（var i=0；i
self.id将出错，因为它不指向元素。他的原始this.id可以使用，因为它是他正在访问的DOM元素的id。您也不需要使用
$（“#”+this.id）
重新查询，只需
$（this）
即可。self.id将出错，因为它不指向元素。他原来的this.id将起作用，因为他正在访问的是DOM元素的id。@steve_c太棒了！我还注意到，不需要使用
“#”+this.id对DOM元素进行另一次查询，只要
$（this）
就足够了。
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++);
            });
        }
    }
}