0

「Predatorlist」を格納する配列呼び出しがあります

 <div id="Predator1"><img src='jef-frog.gif' width='50'></div>

そして、「Predator」を格納する var を宣言し、ID を添付しました。

var speciesType = 'Predator' + document.getElementById('amount').value;

そして、入力ボタンがあります::

 <INPUT type="button" value="Play" onClick="javascript:runItem('Predator') ;">

入力ボタンで必要なものとしてキャプチャして生成するために、次の関数に渡す必要があるアイテムを知っているかもしれません。"Javascript:runItem('Predator');?

function runItem(Predatorlist) {
     var item1 = $("#"+speciesType),cycle1;
     /* Set a the starting position to be random by editing the css */
     $(item1).css("left", startItem1X+"px");
     $(item1).css("top", startItem1Y+"px");

     //$("<img src='jef-frog.gif' width='50'>").appendTo("div#Predator");

     /* Cycle1 and Cycle2 variables allow infinite loop */ 
     (cycle1 = function() {
      var m = randomRange(50,100);
      var n = randomRange(75,150);
      item1.animate({left:'+='+n},2000);
      item1.animate({left:'+='+m, top:'+='+m}, 2000)
      item1.animate({left:'-='+m, top:'+='+m}, 2000)
      item1.animate({left:'-='+n},2000);
      item1.animate({top:'-='+n},2000,cycle1)
          })();

         alert(speciesType);
     }
4

2 に答える 2

0 
var item1 = $("#"+speciesType)
$(item1). //something...

これは正しくないように見えます。jQuery オブジェクトに文字列のみを指定する必要があります。これにより、そこに enire オブジェクトを渡すよりもコードがはるかに読みやすくなります。したがって、上記の行は次のいずれかになります

var item1 = "#"+speciesType
$(item1). //something...

また

var item1 = $("#"+speciesType)
item1. //something...

次に、setIntervalアニメーション ループに for を使用します。これは、現在のように停止することができず、コードがよりクリーンになるためです。

最後に、あなたの捕食者のために:bodyドキュメントの にコードを追加する次のようなものが必要ですか?

for(var i in predatorList) {
  $('body').append('<div id="'+predatorList[i]+'"><img src="img/pred.png"></div>');
}

さらに質問がある場合は、コメントしてください。質問がわかりにくかったので、私の答えがあなたの言いたいことと異なる場合があります。

編集2：

コードを参照してください (動作中): http://jsfiddle.net/sREEw/3/

私は何をやっている？

捕食者の追加について：

  • ボディに div を追加します
  • div に現在の捕食者数の ID を与える
  • アニメーション ループを設定しますが、既に実行されている場合は最初のループをキャンセルします。ループでは、存在するすべての捕食者を更新します
  • を増やしてnum、次の捕食者が新しい ID を持つようにします

捕食者の除去について:

  • num計算を簡単にするために を 1 減らします
  • 体から捕食者を取り除く
  • 必要に応じてインターバルを停止します

ご覧のとおり、変数に保存しているのは現在の捕食者の数と間隔 ID だけなので、必要に応じてループを停止できます。

于 2012-05-24T08:59:12.460 に答える
0

もしかしてこういうこと？

PredatorAnimation.js

$(document).ready(function() {
    initPredatorList();
}

function initPredatorList() {

    var predatorList = $('.predator');
    $.each(predatorList, function(i, predator) {
        initPredator(predator);
    });

}

function initPredator(predator) {

    predator.css("left", RandomX+"px");
    predator.css("top", RandomY+"px");
    animatePredator(true, predator);

}

function animatePredator(run, predator) {

    while(run) {
        var m = randomRange(50,100);
        var n = randomRange(75,150);
        predator.animate({left:'+='+n},2000);
        predator.animate({left:'+='+m, top:'+='+m}, 2000)
        predator.animate({left:'-='+m, top:'+='+m}, 2000)
        predator.animate({left:'-='+n},2000);
        predator.animate({top:'-='+n},2000,cycle1)
    }

}

次に、html ファイルで使用します。

役に立てば幸いです:)この構文を使用するにはjqueryを使用する必要があることを付け加えるかもしれませんが、これが探しているものかどうかは完全にはわかりません...

上記の回答を見ると、これはよりクリーンな回答です。

$.each(predatorList, function(i, item) {
    $('#container').append(createAndReturnPredatorDiv('predator' + i));
});

function createAndReturnPredatorDiv(predatorId) {
    var predator = $('<div></div>');
    predator.attr('id', predatorId);
    predator.attr('src', 'img/predator.jpg');
    return predator;
}
于 2012-05-24T08:50:57.723 に答える