Question

这与动态div创建有关。我想创建一个动画，其中一个物体（鸟）从地面飞向天空（背景图像包装div）。这只鸟被用作包装的儿童div。每次单击该按钮时，我想创建具有UNIQUE ID的新div标签，以鸟为背景，并相应地使用下面的代码来显示动画。我的代码不起作用，我发现我的错误是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;
    });
});

Answer 1

也许这个例子可以帮助：

$("button").click(function () {

    var bird = document.createElement('div');
    bird.className = 'bird'; // thanks @BenjaminGruenbaum
    wrapper.appendChild(bird);

    for(var num_var = 0; num_var < 29; num_var++) {
        $(bird).animate({
            top: '-=5px',
            right: '-=5px',
        }, 50);
    }

});

Answer 2

我们假设您的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

Answer 3

您可以使用this

这已经存在于jquery UI中，并生成OR删除唯一的id，并由jquery UI在运行时生成

注意： - Jquery UI是一个很大的库来解决这类问题..所以这个答案只适用于你已经在使用jquery UI

在创建动态<div>唯一ID时分配<div> </div>

3 个答案:

您可以看到Working Demo Here