x的变量在transit.js中不起作用

Question

我正在使用transit.js,我有以下几行代码:

var axis = Math.floor(Math.random() * 2);
axis = genXY(axis);

if($(this).hasClass(btn_className)) {       
    $(this).transition({ axis : '100px' } , function(){
        $(this).addClass('active');
        $(this).transition({ axis :  0 , duration : 2000 });
    })  

} 

genXY功能如下:

var xy = ['x' , 'y'];

function genXY(no) {
    return xy[no];
}

现在我在单个元素上运行下面的简单测试(在我的devTools中):

var axis = x;
$('.gridbox .large').eq(2).transition({ x : "100px" });

上面的代码行完美,IE它转换元素100px ,但现在如果我用轴替换x,实际上是一个确实是x的变量,现在代码如下所示:

var axis = x;
$('.gridbox .large').eq(2).transition({ axis : "100px" });

上述行不起作用.它为什么现在有用？afterall轴是x本身,任何人都能解释一下吗？

Answer 1

实际上，您正在将一个密钥放在一个不能这样做的对象上：

var axis = x;
$('.gridbox .large').eq(2)
             .transition({ axis : "100px" }); // <----see the object { axis : "100px" }

如果您尝试用 var 名称代替对象字面量中的 key，则这不会引用它的值，但会key:value在对象中设置一个新值。在 ES5 及更早版本中，不能使用变量作为对象字面量内的属性名称。

那么，可以做什么：

var obj   = {}, // a new object creation
    axis  = x;  // a reference to the x

obj[axis] = '100px'; // now it results in {x:"100px"}

$('.gridbox .large').eq(2)
             .transition(obj); // <---put the object here