0

这里有两段代码，一段使用 JavaSript，第二段使用 jQuery。在每个代码的末尾，我将新属性（x和y）添加到 JavaScript 对象div

但是在第一个示例中使用 JavaScript 保存了属性，但 jQuery 似乎没有按预期工作。

问题：是否有任何特定的方法可以向 JavaScript DOM 对象添加新属性？

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;
    });
}
4

2 回答 2

4

当您向 jquery 对象添加属性时，它不会被添加到 DOM 元素中。它只是被添加到对象中，稍后与对象一起被销毁。您可以使用 jquery 的数据 api 将值放在缓存中。

    $(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});

并使用 getter 检索：

    var coords = $(this).data('coords');
于 2013-09-24T01:46:38.667 回答
2

要使用 jQuery 做同样的事情，您可以使用以下prop方法：

$(this).prop('x', x);
$(this).prop('y', y);
于 2013-09-24T01:52:15.547 回答