Question

我正在尝试构建照片滑块。现在我不介意我这样做的方式不是那么好。我有兴趣知道为什么在我通过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 =＆gt;初始值，何时/如何更改...），但是像transform: translateX(0);这样的起点确保这一点你的矩阵没有返回matrix = ["none"] ...

您的功能似乎正确显示了值。 see codepen

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

您将css变换的值更改为-100%，返回计算值（即：img width为800px，将返回-800）。

此值不会更改，因此显示相同的数字。我可能再次出错，但添加增量计数器（在上面的codepen中添加）会更改值并显示新计算的值。

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

Answer 2

首先，我要感谢Yann非常详细的回答，并且你花时间写了所有这些。

第二次看，我注意到我没有把完整的MCVE放到我的下一个问题上。我在这里是一个新用户，所以请尽快尝试并快速接听：）。

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

最后我意识到为什么价值没有更新。事实上，确实如此。在2秒延迟，因为我使用了＆＃34;转换2s＆＃34;。然后该函数添加了当时的值而不是更改后的完整值，因为值逐渐变化。

当我删除＆＃34;过渡：2s＆＃34;一切都很好。这不是一个好的解决方案，因为我需要制作动画。现在我正在思考如何做到这一点。

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

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(){

});

translateX值不会更新

2 个答案: