0

使用这个简洁的小插件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 });
4

3 回答 3

0

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

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);
于 2013-11-11T15:31:45.107 回答
0

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

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}or {'x': 0}，因此即使您有一个变量x，JavaScript 引擎也不知道它应该使用值x而不是字符串"x"作为键。

于 2013-11-11T15:31:55.087 回答
0

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

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'));
});
于 2013-11-11T15:32:24.840 回答