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関数が機能しません。なぜ認識されないのですか、どうすれば機能させることができますか？

this.Windows [i]もそのブロック内で未定義であるため、jqueryの$（）関数と関係があると思います。

http://jsfiddle.net/79sM8/

「lol」divをクリックして、何が起こるかを確認してください

前もって感謝します

4

3 に答える 3

4

クリック イベントの内部はthis、WM オブジェクトではなく、クリックした要素であるためです。

最も簡単な修正はbind、クリック関数のthis値を前もって修正することです。

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

編集- クリックされた要素からプロパティを読み取る必要があることが判明したため、dom 要素の ID を参照する id必要があるため、この場合はおそらく上記の方法は機能しません。this.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

thisjQuery イベント ハンドラー内のコンテキストは、イベントをトリガーする DOM 要素に設定されます。したがって、thisクリック ハンドラー内ではWindow要素の 1 つが参照されます。

これを回避するには、元の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 に答える