0

我有一个名为“Predatorlist”的数组存储

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

我声明了一个 var 来存储“Predator”并附加了 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

可能是这样的？

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 来使用这种语法，不完全确定这是否是你正在寻找的......

看看上面的答案，imo这是一个更清晰的答案。

$.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 回答
0 
var item1 = $("#"+speciesType)
$(item1). //something...

这看起来不对，你应该只给一个 jQuery 对象中的字符串，它使代码比在那里传递 enire 对象更具可读性。所以，上面的行应该变成

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

或者

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

接下来，我将使用setIntervalfor 动画循环，因为您无法像现在这样停止它，并且它使代码更清晰。

最后，对于你的掠夺者：你需要像下面这样的东西，将代码附加到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

在移除捕食者时：

  • 减少num1 以便于计算
  • 将捕食者从身体中移除
  • 如果需要，停止间隔

如您所见，我在变量中保存的只是当前捕食者的数量和间隔 ID，因此我可以在需要时停止循环。

于 2012-05-24T08:59:12.460 回答