Question

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”，所以我的change-zindex-on-click功能不起作用。为什么它不被认可，我怎样才能使它发挥作用？

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

http://jsfiddle.net/79sM8/

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

提前致谢

Answer 1

因为在您的点击事件中，this是您点击的元素，而不是WM对象。

最简单的解决方法是提前bind点击功能的this值：

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

编辑 - 原来你想要从被点击的元素中读取id属性，因此在这种情况下上面可能不起作用，因为你还需要{{ 1}}来引用dom元素的id。

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

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

this

Answer 2

单击处理程序中的变量“this”的范围限定为单击的元素，而不是WM对象。你应该将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() {
        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++);
            });
        }
    }
}

Answer 3

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页面提供了更多详细信息。

this.variable =在jquery的click（）里面的NaN

3 个答案: