translateX 值未更新答案

【问题标题】：translateX value does not get updatedtranslateX 值未更新
【发布时间】：2016-02-24 14:29:53
【问题描述】：

我正在尝试构建照片滑块。现在我不介意我做的方式不是那么好。我有兴趣知道为什么在我通过 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 {}
});

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

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

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

【问题讨论】：

可能 console.log 没有等待 transX_func() 完成。你检查过吗？
一个简单的 MCVE 将有助于找到问题...
这个问题怎么能得到这么多的赞成票，而因为缺少相关的 MCVE 而应该关闭它？有人可以复制吗？

标签： javascript jquery css

【解决方案1】：

我无法确定这种行为，因为我们没有您的 sn-p 的完整上下文（css 转换 => 初始值，它何时/如何改变......），但有一个起点transform: translateX(0); 确保你的矩阵不返回matrix = ["none"]...

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

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

您将 css 转换的值更改为 -100%，它返回计算值（即：img 宽度为 800 像素，将返回 -800）。

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

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

【讨论】：

【解决方案2】：

首先，我要感谢 Yann 提供了非常详细的答案，并且感谢您花时间写下所有内容。

再看一遍，我注意到我没有放置完整的 MCVE，这可能可以解决我的下一个问题。我是这里的新用户，所以我会尝试快速上手:)。

我现在将添加整个 MCVE，以便您查看并复制它。

最后我开始意识到为什么值没有更新。事实上，确实如此。因为我使用了“transition 2s”，所以延迟了 2 秒。所以该函数添加了当时的值，而不是更改后的完整值，因为值逐渐变化。

当我删除“transition:2s”时，一切都很好。但这不是一个好的解决方案，因为我确实需要制作动画。现在我正在考虑如何做到这一点。

感谢大家的回复。这是没有动画的工作代码（我正在努力理解如何这样做）

var translateX = 0;

var firstVal = 0;

function transX_func(){

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

    for (a in newArray ) {
        newArray[a] = parseInt(newArray[a], 10); 
    }
    var transX = newArray[4];
    translateX = transX;
    console.log("translateX inner = ",translateX);
}


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


}); 

$('#prev').click(function(){

});

【讨论】：