如何使用jQuery的.data（）函數保存兩個變量？

Question

當我執行以下腳本時，警報中僅顯示一個值：

<script>
    window.onload = function () {
        var num = 15;
        for (var i = 0; i < 10; i++) {
            $('<tr style="background-color: aqua" id = ' + i + '></tr>').appendTo("table");
            for (var j = 0; j < 10; j++) {
                num++;
                $('<td id ='+num+'></td>').appendTo("#"+i);
                $('<button>S</button>').data("field", i, j).appendTo("#" + num);
            }
        }
        $('td').on('click', 'button', function () {
            var d = $(this);
            alert(d.data("field"));  // here alert shows one variable
        });
    }
</script>

如何在元素的數據中存儲兩個值？ 也許我可以發送一個數組？

Answer 1

使用jQuery 數據方法存儲的數據可以是一個對象。 因此，您可以通過以下方式存儲值：

$('<button>S</button>').data("field", { i: i, j: j});

然后像這樣再次讀出它們：

var d = $(this),
    field = d.data("field");
alert(field.i);
alert(field.j);

您還應該研究使用jQuery的ready方法而不是window.onload 。

Answer 2

您可以將它們設置為object或array 。

 $('<button>S</button>').data("field", [i,j] ).appendTo("#" + num);

並提醒他們使用

alert( d.data("field").join(',') );  // here alert shows one variable

按照注釋“ 實際上不需要調用join（“，”），由數組實現的toString（）的覆蓋已經執行了此操作。 ”。 所以你們都可以

alert( d.data("field") );

在http://jsfiddle.net/xhPjh/上檢查