append（）と$（this）jQueryの.addClass（）メソッドが動作しません。

Question

jQueryを初めて使用しています。以前のJavaScriptコードをjQueryにリファクタリングしています。私はappend()と$(this).addClass()メソッドを使用しますが、動作しないようです。私は問題が何であるか分からない。

JavaScriptコードは、パズルゲーム（15個のパズル）を作成することです。私はjQueryの方法でHTMLファイルに要素を追加しようとしています。

var tile = function(i, j) { 
    this.seq = i * 4 + j + 1; 
    this.row = i + 1; 
    this.column = j + 1; 
    if (i * 4 + j != 15) { 
     $(this).addClass("block puzzle row" + this.row + " column" + this.column); 
     var xPosition = -j * 88; 
     var yPosition = -i * 88; 
     $(this).css("backgroundPosition", xPosition + "px " + yPosition + "px"); 
    } else { 
     $(this).addClass("block row" + this.row + " column" + this.column); 
     $(this).attr('id', "blank"); 
    } 
} 

function Init() { 
    var node = $("#imgContent"); // imgContent is a div 
    for (var i = 0; i < 4; i++) { 
     for (var j = 0; j < 4; j++) { 
      var t = new tile(i, j); 
      node.append(t); 
     } 
    } 
    // Generate the original picture before the start 
    Judge.isStart = false; 
} 

これらのjQueryメソッドを正しく使用するにはどうすればよいですか？あなたの関数内で何が起こっている

Answer 1

あなたは$（this）を間違って使用しています。 tile（）関数がnewで呼び出されると、それはオブジェクトとしてインスタンス化され、 'this'はそのオブジェクトへの参照になります。そうすることで、 'this'を使用して内部状態に値を割り当てることができます。構文。

jQueryは、主にDOM（Document Object Model）を操作するように設計されています。通常、セレクタをjQueryに渡します。このセレクタは、ドキュメントから一致するHTMLElementsを見つけて、操作のためにそれらを返します。タイルのコンテキスト内の$（this）はjQueryが返すだけのこの参照を渡しています。

重要な部分は、$（this）はタイルオブジェクトを表し、実際にはドキュメントの要素ではありません。 .css .addClassと.append関数は、要素で動作するため、適用されません。それらを使用するには、セレクタまたは要素をjQueryに渡す必要があります。

解決策は、ドキュメントに追加できるタイル内の要素を作成することです。

https://jsfiddle.net/hxqduoef/2/

var tile = function(i, j) { 
    this.seq = i * 4 + j + 1; 
    this.row = i + 1; 
    this.column = j + 1; 

    // $("<div></div>") creates a new div element wrapped in the jQuery object, it isn't part of the document until it gets appended. saving to this allows further manipulations within this constructor. 
    this.element = $("<div>Tile at "+ i +" "+ j +"</div>"); 

    if (i * 4 + j != 15) { 
     this.element.addClass("block puzzle row" + this.row + " column" + this.column); 
     var xPosition = -j * 88; 
     var yPosition = -i * 88; 
     this.element.css("backgroundPosition", xPosition + "px " + yPosition + "px"); 
    } else { 
     this.element.addClass("block row" + this.row + " column" + this.column); 
     this.element.attr('id', "blank"); 
    } 

} 

function Init() { 
    var node = $("#imgContent"); // imgContent is a div 
    for (var i = 0; i < 4; i++) { 
     for (var j = 0; j < 4; j++) { 
      var t = new tile(i, j); 
      node.append(t.element); 
     } 
    } 
    // Generate the original picture before the start 
    // Judge.isStart = false; 
} 

これは "this.element" プロパティを追加、それがnode.append（t.element）文でTの代わりに新しいDIV要素とリファレンスとして設定します。

こちらがお役に立てば幸いです。

Answer 2

$(this)is actually defined by the invoker of the function, while explicit variables remain intact inside the function declaration block known as the enclosure.

、tile(i,j)で明示的に呼び出されている、これは文脈を意味や機能の「これは」window objectは、あなたの質問に固有の.Beingされ、thisがにバインドされていますグローバルオブジェクトは、windowです。例えば

、検討し、以下の機能、

function myFunc(){ 
} 

と、

var myObj= { myFunc: myFunc}; 

あなたがmyObj.myFunc()を使用して呼び出した場合。 thisはmyObjにバインドされています。

あなたが 、などmyFunc();、など、直接myFunc()を呼び出す場合は、thisがwindowでグローバルオブジェクトにバインドされるに。

したがって、次の親オブジェクトを持たない関数を呼び出すと、ほとんどのブラウザでwindowオブジェクトを意味するglobal objectが表示されます。

Answer 3

コンテキストがthisに変更されると、thisを変数に保ち、その変数を使用します。

var $this = this; 
var tile = function(i, j) { 
$this.// your code 
}