Javascript 变量 - initialize/math/store 数值

Question

我的目标是在变量中存储一个数值，其次 increment/decrement 在点击事件中使用这个值，最后使用这个值来设置样式。

我想出的函数是这样的：

    function onButtonClick(e) {
    var rot = this.className.slice(5),
           rotaX,
           rotaY,
           rotationX,
           rotationY,
           step = 90;

    if( rot === 'up'){rotationX = rotaX - step}      /* {alert (rot);}//    //{rotationX -= step}// */
    else if (rot === 'down') {rotationX   = rotaX + step}
    else if (rot === 'right') {rotationY  = rotaY - step}
    else if (rot === 'left') {rotationY   = rotaX + step };

    var rotaX = rotationX ;
    var rotaY = rotationY;

    cubeRot.style.transform = "rotateX("+ rotationX +"deg) rotateY("+ rotationY +"deg)";


}

选择器的评估和定位似乎是正确的，所以问题一定出在我如何 summing/storing 值上，结果是它 return 没有任何值...

顺便说一句，欢迎任何关于优化语法的建设性建议。

编辑1

最初我没有存储值，代码是

var rotations = {
up: "rotateY(90deg)",
down: "rotateY(-90deg)",
left: "rotateX(90deg)",
right: "rotateX(-90deg)"
};
function onButtonClick(e) {
var rot = this.className.slice(5);
cubeRot.style.transform = rotations[rot];
 }
[].slice.call(document.querySelectorAll("[class^='show-']")).forEach(function(el) {
el.addEventListener("click", onButtonClick, false);
})

编辑2

    var rotationX=0,
    rotationY=0;

function onButtonClick(e) {

       var rot = this.className.slice(5),
           step = 90;
    if( rot === 'up') {rotationX -= step}
    else if (rot === 'down') {rotationX   += step}
    else if (rot === 'right') {rotationY -= step }
    else if (rot === 'left') {rotationY  += step };

 cubeRot.style.transform = "rotateX("+ rotationX +"deg) rotateZ("+ rotationY +"deg)";
}
[].slice.call(document.querySelectorAll("[class^='show-']")).forEach(function(el) {
    el.addEventListener("click", onButtonClick, false);
});

以这种方式变量 rotationX ,rotationY; 被正确存储 - RotaX 和 RotaY 没用

Answer 1

据我所知，您的代码存在两个主要问题：

捕获多维数据集当前状态的变量不会在 onButtonClick() 的不同调用之间保留。
你提取 class 的方法不太稳定。有很多方法，这可能会出错。

下面的代码应该通过对状态使用全局变量和 classList 属性来检索 classes 来解决这两个问题。

// define the state outside to have it preserved between calls
var rotaX = 0,
    rotaY = 0;

function onButtonClick(e) {
    var klasses = this.classList,
        step = 90;

    if(       klasses.contains('up')    ){ rotaX -= step; }
    else if ( klasses.contains('down')  ){ rotaX += step; }
    else if ( klasses.contains('right') ){ rotaY -= step; }
    else if ( klasses.contains('left')  ){ rotaX += step; }

    cubeRot.style.transform = "rotateX("+ rotaX +"deg) rotateY("+ rotaY +"deg)";
}

作为引入 2 个新全局变量（rotax 和 rotay）的替代方法，可以考虑在 cubeRot 中使用 data- attributes 来存储当前状态。

PS：可以删除局部变量 rotationX 和 rotationY。您似乎从未以不同于 rotaX 和 rotaY 的方式使用它们。但也许代码的某些部分在示例中被删除了......

编辑

我调整了上面的功能，使其无需任何其他代码即可自行运行。看到这个 example fiddle.

您可能想看看 transform-origin 以将旋转的元素保持在视口中。

Javascript 变量 - initialize/math/store 数值

Javascript Variable - initialize/math/store numerical value

javascript

regex

closures