0

私は Web アプリケーションを作成したいと思っています。これは、HTML 要素が作成され、さまざまな他の要素によって処理されて移動されるため、HTML 要素がかなり動的でなければならないことを意味します。したがって、クラスを使用することにしました-イベントを処理する時点まで、多くの成功を収めました..これは、Chromeが定義されていない変数と混同していると疑っているクラスです。

function SpanInputPair(element) {
    span = document.createElement("span");
    this.Span = getNextInputID();
    span.style.display = "none";
    span.id = this.Span;
    element.appendChild(span);
    input = document.createElement("input");
    input.type = "text";
    this.Input = getNextInputID(); // request a new ID for this element and save into this class
    input.id = this.Input; // Attach it onto the element for future finding :/ (slow)
    element.appendChild(input);
    input.focus();
    span.onclick  = function() {
        var input = getInput(this.Input); // this.Input cannot be seen?
        var span = getInput(this.Span);
        input.value = span.innerHTML;
        toggleDisplay(input);
        toggleDisplay(span);
        input.focus();
    }
    input.onblur...

「var input = getInput(this.Input);」という行 Chromeが「this.Input」が表示されなくなったと言っているため、これが問題です。この行を実行して「this.Input」を実際の値に置き換えると、要素が正常に返されるため、これを知っています。ご覧のとおり、テキスト ボックスとスパンを動的に作成し、将来の使用のためにそれらの ID を設定しています。これは、以前に要素自体をクラスに保存し、それをイベント内で使用しようとしたためです。同じ問題なので、代わりに、document.getElementByID() を使用して、ドキュメントの各イベントでそれを見つけます。奇妙なことに、作成したばかりのテキスト ボックスにフォーカスしているようにも見えません (それが問題の一部である場合はわかりません)。このプロジェクトは完全にゼロから作成され、ライブラリを使用しません。だから私の質問は、なぜ要素が「■ イベントは、それを作成したクラス内の変数を参照できませんか? どうすればこれを修正できますか？

多くの人がJQueryなどのライブラリを使用している、および/またはクラスを使用していないため、これが投稿されたことはまだ見ていません。質問は、クラスの内部変数を使用したイベント処理に固有のものです。

4

2 に答える 2

2

あまり意味がないかもしれませんが、宣言したローカル関数内で this の値が変わっているため、JavaScript では正常です。したがって、JavaScript で関数を宣言して使用する方法を正しく理解する必要があります。

JavaScript の関数にはcontextと呼ばれるものがあります。これは、すべての関数が特定のオブジェクトにバインドされていることを意味します。スクリプトで関数を宣言すると、グローバル オブジェクト (ブラウザーのウィンドウ) にバインドされます。

ただし、メソッド(オブジェクトに属する関数) を宣言しようとするthisと、オブジェクト自体を表すマジック変数になります。を呼び出すthis.my_propertyたびに、オブジェクトのプロパティの値 (「属性」または「メソッド」) を取得します。

したがって、イベント ハンドラーで発生するように、関数のコンテキストを変更できます。あなたのシナリオでは、イベント ハンドラーはコンテキストが変更された関数であるため、これにアクセスするたびに、その値は、クリックしたときにイベントを受け取る HTMLElement オブジェクトになります。

この問題を解決するには、補助変数を宣言してハンドラー内で使用します。コミュニティが従う一般的な慣行は次のとおりです。

var that = this;   // Also, the people use 'self' instead of 'that'

span.onclick = function() {
   var input = that.input;

   // ...
};

この回避策を使用すると、問題は発生しません。

于 2013-06-14T16:02:22.330 に答える
1

click 関数内の「this」の値は、クリックされた要素です。これが<span>あなたが作成したものです。

クリック関数を定義したときに this の値が必要です。(質問は、関数が呼び出されたときの 'this' の値は何SpanInputPairですか?それを検討することもできます。)

クロージャーに追加する次のような方法でそれを行うことができます：

var thisInput = this.Input;
...

span.onclick  = function() {
    var input = getInput(thisInput);

次の行でも同じ問題が発生しthis.Spanます。

于 2013-06-14T15:45:40.813 に答える