gpt4 book ai didi

javascript - 创建时分配动态
唯一 ID

转载 作者:行者123 更新时间:2023-11-28 13:17:08 25 4
gpt4 key购买 nike

这与动态div创建有关。我想创建一个动画,其中一个对象(鸟)从地面飞向天空(背景图像包装 div)。这只鸟用作包装器的子 div。每次单击按钮时,我都想创建一个新的 div 标签,带有 UNIQUE ID,以鸟为背景,并相应地使用下面的代码来显示动画。我的代码不工作,我找不到我的错误是 jquery 和 javascript 的新手。

还有,哪个效率更高?为每个标签创建唯一 ID 或将它们分配为数组值?

$(document).ready(function () {
bird_count = 0;
$("button").click(function () {

var bird = document.createElement('div');
bird.setAttribute('id', "bird" + bird_count);
wrapper.appendChild(bird);
num_var = 0;
while (num_var < 29) {

$("#bird").animate({
top: '-=5px',
right: '-=5px',
}, 50);
num_var = num_var + 1;
}
bird_count = bird_count + 1;
});
});

最佳答案

假设您的 HTML 类似于:

<button id='makeBird'>Make a new bird!</button>
<div id='wrapper'></div>

这对您的 JS 代码来说是合理的。

让我们看看如何编写 JS 来避免像 "#name"+number 这样的东西.

每次单击按钮时,以下内容都会创建一只鸟。它为它们添加了数字。

var button = document.getElementById("makeBird"); // get the button and wrapper elements
var wrapper = document.getElementById("wrapper");

var counter = 0; //our counter
button.onclick = function () { // when you click on the button
var bird = document.createElement('div'); // make a new bird
var birdNumber = counter; // assign it a counter number
counter++; // and increase the counter
bird.className = "bird";
bird.onclick = function () { // when you click on it
alert("HI, I'm bird "+birdNumber); // it tells you which bird it is
}
$(bird).animate({ // when we create the bird, animate it
right: '-=400px',
}, 10000);
wrapper.appendChild(bird); // append our bird to the wrapper.
};

你可以看到一个Working Demo Here

PS,如果我们将 JS 代码放在 <body> 的底部我们的代码部分,我们可以避免 document.ready

这是一个jQuerified解决方案,以防您对此感兴趣。

Here is a jQuerified version wrapped in a loop that creates 29 birds on click

关于javascript - 创建时分配动态 <div> 唯一 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17123891/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com