javascript - if 条件仅适用于警报并且位置已重置？

Question

代码是播放器转到用户点击的地方，但现在我想让 Angular 色看它去的 X 轴。 问题是它仅在您有警报时才起作用，但只有在警报给出错误时才起作用，因为如果警报不给出错误，它就不起作用。 另一个问题是变换 translate3d 被删除，然后播放器返回到相同的位置，尽管 scaleX 发生了变化。

我是 jquery 的新手，我不知道。

$(document).on("click mousedown", "#Park", function(e) {
    var x = e.clientX;
    var y = e.clientY;
    var newposX = x - 60;
    var newposY = y - 60;
    var n = $(".circle").offset()
    if (newposX < n.left) {
        $(".circle").css("transform", "scaleX(-1)");
        alert(ok)
    }
    $(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");

    setTimeout(function() {
        $(".circle3").css("display", "none");
        $(".circle2").css("display", "block");
    }, 2000);
    $(".circle2").css("display", "none");
    $(".circle3").css("display", "block");
});

Answer 1

在条件之后，您将立即用新值覆盖 transform，这意味着 scaleX() 会立即被覆盖，除非您的代码在 警报()。

相反，像这样编写条件，以确保在设置 translate3d() 时 scaleX() 不会被覆盖:

if (newposX < n.left) {
    $(".circle").css("transform", "scaleX(-1) translate3d(" + newposX + "px," + newposY + "px,0px)");
} else {
    $(".circle").css("transform", "translate3d(" + newposX + "px," + newposY + "px,0px)");
}

或者，你可以这样写，在我看来这样更容易阅读:

let transform = `translate3d(${newposX}px, ${newposY}px, 0px)`;
if (newposX < n.left) {
    transform = 'scaleX(-1) ' + transform;
}
$('.circle').css('transform', transform);