Question

你好，这是合约：

HTML

<body onload="load()">
<div id="main">
    <article id="grid_wrapper">
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
        <div id="grid"></div>
    </article>
    <article id="move_wrapper">
        <div class="move"><span class="location"></span>
        </div>
        <div class="move"><span class="location"></span>
        </div>
        <div class="move"><span class="location"></span>
        </div>
        <div class="move"><span class="location"></span>
        </div>
        <div class="move"><span class="location"></span>
        </div>
    </article>
</div>

`

JavaScript

function load() {

    $("#main > *.move").each(function () {

        $(document).keydown(function (e) {
            if (e.keyCode == 37) {

                if (this.position().left > 0) {

                    $(this).animate({
                        left: "-=100px",
                    }, 200);

                } else {
                    this.stop();
                    return false;
                }
            }
            if (e.keyCode == 38) {
                if (this.position().top > 0) {
                    $(this).animate({
                        top: "-=100px",
                    }, 200);
                } else {
                    this.stop();
                    return false;
                }
            }
            if (e.keyCode == 39) {
                if (this.position().left < 300) {

                    $(this).animate({
                        left: "+=100px",
                    }, 200);

                } else {
                    this.stop();
                    return false;
                }
            }
            if (e.keyCode == 40) {
                if (this.position().top < 300) {
                    $(this).animate({
                        top: "+=100px",
                    }, 200);
                } else {
                    this.stop();
                    return false;
                }

            }
        });
    });
}
var loader = setInterval(load(), 5);

这是一个显示我的意思的JSFiddle：http://jsfiddle.net/bDb7z/

基本思路是在按下右键时使所有红色圆圈相对于其位置移动。

JSFiddle中的当前代码由于某种原因不起作用。有什么想法吗？

P.S。我知道他们可能会重叠

由Noble http://jsfiddle.net/YFUD5/3/解决：）

Answer 1

嗯，您只是设置了活动$(document).keydown()而实际上并没有做任何事情，所以您根本不需要load()。实际上，您可以将脚本放在<head>标记中，而不进行任何换行。此外，setTimeout()似乎没用，完全没必要。但是，当您使用setTimeout()时，不要调用您传入的功能。只需输入setTimeout(load, 10)。

这里的根本问题是，您在传递给this的函数中使用.each()对象作为jQuery对象。 this对象只是一个常规元素，如果你想将它用作jQuery对象，你将不得不使用$(this)。

这里是小提琴（抱歉，我说$(document).ready()，这是一个错字）：http://jsfiddle.net/YFUD5/3/

//我省略了加载，因为你把你的JS代码放在$（document）.keydown（）中，我省略了setTimeout（），因为它没有任何意义。

$(document).keydown(function (e) {
    if (e.keyCode == 37) {
        $("#main *.move").each(function() {
            var thisElem = $(this);
            ... (Use thisElem in place of just this)
        });
    }
    if (e.keyCode == 38) {
        $("#main *.move").each(function() {
            var thisElem = $(this);
            ... (Use thisElem in place of just this)
        });
    }
    if (e.keyCode == 39) {
        $("#main *.move").each(function() {
            var thisElem = $(this);
            ... (Use thisElem in place of just this)
        });
    }
    if (e.keyCode == 40) {
        $("#main *.move").each(function() {
            var thisElem = $(this);
            ... (Use thisElem in place of just this)
        });
    }
});

jQuery尝试检查对象的位置并最终为其设置动画.position（）.each（）

1 个答案: