javascript - translateX 值未更新

Question

我正在尝试构建一个照片 slider 。现在我不介意我做这件事的方式是否那么好。我想知道的是，为什么在我通过 jQuery 更改 TranslateX 值并将其打印到控制台后，它不会打印更改后的值？

var translateX;

function transX_func() {
    var matrix = $('#img1, #img2, #img3, #img4, #img5').css('transform').split(/[()]/);
    var newArray = new Array();
    newArray = matrix[1].split(',');

    for (a in newArray) {
        newArray[a] = parseInt(newArray[a], 10); 
    }

    var transX = newArray[4];
    translateX = transX;
}

$('#next').click(function(event){       
    event.preventDefault();
    transX_func();
    if (translateX == 0) {
        $('#img1, #img2, #img3, #img4, #img5').css({
            'transform': 'translateX(-100%)'
        });
        transX_func();
        console.log(translateX);
    }   
    else {}
}); 

编辑:由于您的评论，我在此处添加了整个代码:http://codepen.io/SaharShukrun/pen/pyzeRB

这不是我最初遇到问题的代码，但它非常相似，仍然有同样的问题。

我已经通过了解导致 var 的值无法更新的原因解决了这个问题，并且我在下面发布了答案。

Answer 1

我不能确定行为，因为我们没有你的代码片段的完整上下文(css transform => 初始值，它何时/如何改变......)，但起点像 transform: translateX(0); 以确保你的矩阵不返回 matrix = ["none"]...

您的函数似乎正确显示了值。 see codepen

请注意，我意识到这个答案不是答案

您将 css transform 的值更改为返回计算值的 -100%(即:img 宽度为 800px，将返回 -800)。

此值不变，因此显示相同的数字。我可能又错了，但是添加一个增量计数器(在上面的代码笔中添加)会更改值并显示新计算的值。

我希望这至少能给你一些线索......