2

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，看看会发生什么

提前致谢

4

3 回答 3

4

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

最简单的解决方法是提前bind设置 click 函数的this值：

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

编辑- 结果你想从id被点击的元素中读取属性，所以上面的方法在这种情况下可能不起作用，因为你仍然需要this.id引用 dom 元素的 id。

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

当然，这在 IE8 中不起作用（没有 shim），所以如果这是一个问题，您可以this提前保存 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.id).css("z-index", self.ZIndex++);
        });
    }
}
于 2013-02-10T16:51:30.897 回答
3

单击处理程序中的变量“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++);
            });
        }
    }
}
于 2013-02-10T16:53:34.253 回答
1

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

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

于 2013-02-10T16:52:28.997 回答