Question

所以我有这段代码：

$(document).ready(function() {
            $(document).keypress(function(e)
            {
                switch(e.which)
                {
                    // user presses the "a"
                    case 97:    $('#character').css('left','+=40');
                }
            }
}

问题是我只能按“a”一次而#character只移动一次......

我还启用了jQuery draggable（http://jqueryui.com/demos/draggable/），周围有一个约束区域。

为什么我只能用按键移动div一次？

Answer 1

我认为jQuery在调用.css()时不会解释“+ = 40”。我怀疑它只移动一次，因为你第一次爆炸掉了原来的“左”值并将其设置为字符串“+ = 40”，浏览器忽略了这一点。随后的点击只会重复这一点。

我可能错了，但我一直在阅读jQuery源代码，我没有看到任何暗示.css()函数执行.animate()对此类值的处理。

您可以尝试直接使用.animate()：

case 97:    $('#character').animate({'left': '+=40'}, 1);

Answer 2

您可以将函数传递给.css()的第二个参数，您可以在其中手动对要设置的值进行一些操作。

试试这个：

       // The 'left' parameter in the function references the current position.

case 97:$('#character').css('left',function(i,left){
                                    return parseInt(left) + 40;
                                });

编辑：正如 @Gaby 所述，调用.replace('px','')是不必要的，因为.parseInt()会自动处理此问题。

Answer 3

我认为你需要获得角色的位置，向左边添加40，然后应用css更改，例如

var pos = $("#character").offset();

$("#character").animate({"left": pos.left + 40}, 100);

如果您将角色的位置存储在其他位置，您也可以更新该值并更新它在游戏循环中的位置。

Answer 4

我很惊讶它做了什么！

你错过了一对夫妻）; 我也调整了一下。这有效！

$(document).ready(function () {
    $(document).keypress(function (e) {
        switch (e.which) {
            // user presses the "a"   
            case 97:
                var left = parseInt($('#character').css('left')) + 40;

                $('#character').css('left', left + 'px');
        }
    });
});

jQuery一点一点地在屏幕上移动一个div

4 个答案: