javascript - 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" });

上面的代码行工作完美，I.E.它通过 100px 转换元素 ，但现在如果我用 axis 替换 x ，这实际上是一个确实是 x 的变量，现在代码如下所示:

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

上面一行行不通。为什么它现在起作用了？毕竟轴是 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