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

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

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

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引擎也不知道它应该使用{{1}的值而不是字符串x作为键。

Answer 3

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

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

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

3 个答案: