Javascript变量 - 初始化/数学/存储数值

Question

我的目标是将数值存储在变量中，其次在click事件上增加/减少此值，最后使用该值进行样式设计。

我想出了看起来像这样的功能：

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


} 

评价和定位的选择似乎是正确的，所以这个问题必须在如何我总结/存储的值，结果是它不” t返回任何值...

顺便说一句，关于优化语法的任何建设性意见是值得欢迎的。

EDIT1

原本我没有存储所述值和所述码是

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

EDIT2

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

据我所知有两个主要的问题与您的代码：

1. 的变量捕捉将不会保留的onButtonClick()不同调用之间的多维数据集的当前状态。
2. 你提取类的方式并不稳定。有很多方法，这可能会出错。

下面的代码应通过为国家和全局变量classList属性检索类解决这两个问题。

// 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以将旋转元素保留在视口中。