时间戳

首页 > 解决方案 > if 条件仅适用于警报并且位置已重置？

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

问题描述

代码是玩家去用户点击的地方，但现在我想让角色看它去的X轴。问题是它仅在您有警报时才有效，但只有在警报给出错误时才有效，因为如果警报没有给出错误，它就不起作用。另一个问题是，transform 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");
});

标签： javascriptjqueryhtmlcss

解决方案

在条件之后，您立即transform用新值覆盖 ，这意味着scaleX()除非您的代码在alert().

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

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

推荐阅读