0

ここに 2 つのコード ブロックがあります。1 つは JavaSript を使用し、2 つ目は 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 に答える