使用变量作为数组中的对象属性名称？

Question

使用这个简洁的小插件http://ricostacruz.com/jquery.transit，非常类似于 jQuery 的内置支持：

$('.some-element').css({propname1: 'value1', propname2: 'value2'});

它是这样工作的：

$('.some-element').transition({ x: '40px', y: '40px' });

我可以像这样对属性值使用变量（这可行）：

var xVal = '40px',
    yVal = '40px';
$('.some-element').transition({ x: xVal, y: yVal });

但我需要能够通过这样的变量指定转换的“类型”（这不起作用）：

<div class="some-element" data-ca-type1="x" data-ca-type2="y"></div>

var xVal = '40px',
    yVal = '40px',
    target = $('.some-element'),
    type1 = target.data('caType1'),
    type2 = target.data('caType2');
target.transition({ type1: xVal, type2: yVal });

Answer 1

您可以在数组和对象上使用[] 来设置动态属性值。

transitionData = {};
transitionData[type1] = xVal;
transitionData[type2] = yVal;
target.transition(transitionData);

我更喜欢内联这些东西，这可以通过实例化一个匿名函数来完成：

target.transition(new function () {
    this[type1] = xVal;
    this[type2] = yVal;
}());

虽然通常我可能只是将转换数据直接保存在 [data-*] 属性中作为 JSON，利用 jQuery 的 .data() 自动解析：

_HTML:

<div data-ca='{"x":"40px","y":"40px"}'></div>

_JS:

$('[data-ca]').each(function () {
    $(this).transition($(this).data('ca'));
});

Answer 2

您需要先创建一个空对象（或具有非动态键的对象），然后使用方括号表示法设置动态键的值。像这样的：

var xVal = '40px',
    yVal = '40px',
    target = $('.some-element'),
    type1 = target.data(caType1),
    type2 = target.data(caType2);
var options = {}
options[type1] = xVal;
options[type2] = yVal;
target.transition(options);

使用对象文字语法创建对象时，键始终被视为字符串值。 {x: 0} 等价于{"x": 0} 或{'x': 0}，所以即使你有一个变量x，JavaScript 引擎也不知道它应该使用x 的值而不是字符串"x"钥匙。

Answer 3

在对象文字中，属性名称始终是文字。您需要使用数组语法来创建具有计算属性名称的属性：

var x_val = '40px',
    y_val = '40px',
    target = $('.some-element'),
    type1 = target.data('caType1'),
    type2 = target.data('caType2'),
    options = {};
options[type1] = x_val;
options[type2] = y_val;
target.transition(options);