append() и $ (this) .addClass() метод в jQuery не работает

Question

Я новичок в jQuery, и я рефакторинг бывшего JavaScript-кода в jQuery. Я использую методы append() и $(this).addClass(), но, похоже, они не работают. Я не знаю, в чем проблема.

Код JavaScript предназначен для создания головоломки (15 головоломок). Я пытаюсь добавить элемент в HTML-файл в jQuery.

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() вызывается с новым, она создается как объект, а «this» становится ссылкой на этот объект. При этом вы можете присвоить значения своему внутреннему состоянию, используя «this». синтаксис.

jQuery предназначен, в первую очередь, для управления объектной моделью документа (DOM). Обычно вы передаете селектор в jQuery, который находит соответствующие HTMLElements из документа и возвращает их для манипуляций. $ (this) в контексте tile передает эту ссылку, которую 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» собственность, устанавливает его в качестве нового элемента DIV и ссылки он вместо т в node.append (t.element) заявление.

Надеюсь, это поможет.

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, являющимся специфическими для вашего вопроса, this обязан глобальный объект, то есть window.

Для примера рассмотрим следующую функцию,

function myFunc(){ 
} 

и

var myObj= { myFunc: myFunc}; 

Если вы вызываете с помощью myObj.myFunc(); затем this привязан к myObj.

Если вы звоните myFunc() непосредственно, например, myFunc();, затем this связан с глобальным объектом, который является window.

Следовательно, вызов функции без следующего родительского объекта, как правило, дает вам global object, который в большинстве браузеров означает объект window.

Answer 3

контекст this меняется, сохраняйте this переменной, затем используйте эту переменную.

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