Вот два блока кодов: один с JavaSript, второй - в jQuery. В конце каждого кода я добавление новых свойств (х и у) в DIV объектов JavaScript
Но свойства сохраняются в первом примере с помощью JavaScript, но jQuery, похоже, не работает так, как предполагалось.
Вопрос: Есть ли какой-либо конкретный способ добавления новых свойств в объект DOM JavaScript?
JavaScript
init = function() {
var puzzleArea = document.getElementById('puzzlearea');
var divs = puzzleArea.getElementsByTagName("div");
// initialize each piece
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
// calculate x and y for this piece
var x = ((i % 4) * 100);
var y = (Math.floor(i / 4) * 100);
// set basic style and background
div.className = "puzzlepiece";
div.style.left = x + 'px';
div.style.top = y + 'px';
div.style.backgroundImage = 'url("background.jpg")';
div.style.backgroundPosition = -x + 'px ' + (-y) + 'px';
// store x and y for later
div.x = x;
div.y = y;
}
};
JQuery
init = function() {
var puzzleArea = $('div#puzzlearea');
var divs = $('div#puzzlearea div');
divs.each(function(idx, e) {
var x = ((idx % 4) * 100);
var y = (Math.floor(idx / 4) * 100);
$(this).addClass("puzzlepiece").css({
"left":x + "px",
"top":y + "px",
"background-image":"url('background.jpg')",
"background-position":-x + "px " + (-y) + "px"});
$(this).x = x;
$(this).y = y;
});
}
Когда вы добавляете свойство в объект jquery, он не добавляется к элементу DOM. Он просто добавляется к объекту и позже уничтожается с объектом. Вы можете использовать данные api jquery для размещения значений в кеше.
$(this).data('x', x); //or do this.x = x;
$(this).data('y', y); //or do this.y = y
или просто сохранить как
$(this).data('coords', {"x":x, "y": y});
и извлекать с использованием геттера:
var coords = $(this).data('coords');
Чтобы сделать то же самое, используя jQuery, вы будете использовать метод prop
:
$(this).prop('x', x);
$(this).prop('y', y);
div.x = x
работает для вас,this.x
также должен работать. Также я не уверен, является ли хорошей идеей загрязнять элемент, добавляя к нему свойства, отличные от того, что он имеет. (Я не уверен, но вероятно это может вызвать утечки памяти). Лучший способ - использовать атрибутdata-*
по моему мнению также является юридически действительным.