1

これは、動的な 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;
    });
});
4

3 に答える 3

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);
    }

});
于 2013-06-15T13:12:20.247 に答える
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.
};

ここで動作するデモを見ることができます

PS、JS コードをコードの<body>セクションの一番下に配置すると、回避できます。document.ready

あなたがそれに興味がある場合に備えて、これはjQuerifiedソリューションです。

これは、クリック時に 29 羽の鳥を作成するループにラップされた jQuerified バージョンです。

于 2013-06-15T13:13:18.453 に答える
0

あなたはこれを使うことができます

これはすでに jquery UI に存在し、一意の ID を生成または削除し、jquery UI によって実行時に生成されます

注:- Jquery UI は、この種の問題を解決するための大きなライブラリです。したがって、この回答は、既に使用している場合にのみ適用されます。 jquery UI

于 2013-06-15T13:04:28.730 に答える