如何使用對象設置jQuery.data（）

Question

我目前正在嘗試使用.data（）方法來使用變量存儲數據。 但是，由於某種原因，它無法正常工作。 這是我的概念證明代碼：

var option = 'x';
$(this).data({ 'x' : 0 });
alert($(this).data(option));
$(this).data({ option : 20 });
alert($(this).data(option));

令人驚訝的是，這兩個警報都返回0，而不是0，然后返回20。我們非常感謝您的幫助！ 謝謝！

Answer 1

這是因為在第二個版本中，您引用的是鍵“選項”，而不是變量選項（鍵“ x”）。

var option = 'x';
$(this).data({ 'x' : 7 });
console.log($(this).data(option));
$(this).data({ option : 20 });
console.log($(this).data('option'));

一個更簡單的版本：

option = 'x';
console.log({option: 20});

輸出：

Object { option=20 }

但是，您可以將鍵值語法與變量一起使用。

$(this).data(option, 20 );

Answer 2

您想訪問該屬性。

$(this).data({ option : 20 });
alert($(this).data('option'));

Answer 3

問題在於，對象文字中的option關鍵字被解釋為鍵的文字字符串，而不是x （這就是對象文字的工作方式）。 如果要使用可變鍵，則需要使用一個臨時對象。 例如，

var option = 'x';
$(this).data({ 'x' : 0 });
alert($(this).data(option));
// create a data object so you can use a variable for the key
var obj = {};
obj[option] = 20;
$(this).data(obj);
alert($(this).data(option));

Answer 4

原因是你的第二個

$(this).data({ option : 20 }); 

實際將其設置為x屬性時，將20設置為option屬性。

我認為這是您要執行的操作：

var option = 'x'; 
$(this).data({ x : 0 }); 
alert($(this).data(option)); 
$(this).data({ x : 20 }); 
alert($(this).data(option)); 

或者，您可以改為使用鍵值語法，如下所示：

var option = 'x'; 
$(this).data(option, 0); 
alert($(this).data(option)); 
$(this).data(option, 20); 
alert($(this).data(option)); 

Answer 5

數據對象的鍵不能是變量。

您可以做的是：

var option = 'x';
var data = {};
data['x'] = '0';
$(this).data(data);
alert($(this).data(option));