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


}

评估和定位选择器似乎是正确的，所以问题必须在于我如何汇总/存储值，结果是它没有返回任何值......

BTW欢迎任何有关优化语法的建设性意见。

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

Afaik您的代码存在两个主要问题：

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

以下代码应该通过使用状态的全局变量和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以将旋转的元素保留在视口中。

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

1 个答案: