如何在没有事件的情况下移动 div 的孩子

Posted 2023-05-09

【中文标题】如何在没有事件的情况下移动 div 的孩子

【英文标题】：How to move children of a div with no event

【发布时间】：2016-10-13 04:27:15

【问题描述】：

我目前正在制作一个游戏，其中方块掉落，你必须避免它们。我有一些 jQuery 代码将块附加到 div称为 game.

我无法选择每个生成的 div 并让它们向下移动而无需单击。 Here is the GitHub link 这里是example

这里是 jQuery 代码（部分）

function spawn_block()

$spawned_block = $("<div class='block'></div>")
$game.append($spawned_block); //add div with class block to #game div

var left=getRandomInt(0, $game.width()-$spawned_block.width()); //gets a random value from left of screen where div can appear
var top=getRandomInt(0, $game.height()-$spawned_block.height()); //not useful unless you don't want the div to appear at the top
//adds a random position and color to spawned_block

$spawned_block.css(
    "left": left,
    "background-color": getRandomColor()
);
//if you want a random position from top add "top" : top,
;

---

    if($spawned_block.position.top < $game.position.top + $game.height ) 
        $spawned_block.css("top", "+=25px");
    

这最后一段代码是我在函数末尾添加的，我做错了什么？

【参考方案1】：

不确定这是不是发生在您身上，但只是最近添加的div 向下移动？如果您执行以下操作可能会有所帮助：

$("#game .block").each(function(index)
    if($(this).position.top < $game.position.top + $game.height ) 
        $(this).css("top", "+=25px");
    
);

这会遍历 id #game 元素中的每个 .block 并在其上运行您的 if 语句。

可能是您的问题的另一件事（恐怕您的问题对我来说不够清楚）是您只是在运行该函数以在事件发生时将所有内容向下移动（例如单击或一个正在添加的块）。也许这样的事情可能对你有用：

function anim() 
    $("#game .block").each(function(index)
        if($(this).position.top < $game.position.top + $game.height ) 
            $(this).css("top", "+=25px");
        
    );
    window.requestAnimationFrame(anim);

window.requestAnimationFrame(anim);

这告诉浏览器（通过window.requestAnimationFrame(anim); 行）在下一帧运行函数anim()，该函数将块向下移动。你可以阅读更多关于requestAnimationFrame()here的信息。

祝你好运！

【讨论】：

感谢您的帮助，但它仍然对我不起作用！ :( 不过，感谢您让我看到我的基本错误是什么

@FlipFloop 如果您可以使用最新版本的代码更新您的问题或您的 GitHub，我可以修改我的答案以更好地帮助您。