Question

我有一个数组调用“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（ '捕食者'）;

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

Answer 1

这样的事可能吗？

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

Answer 2

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

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

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

或

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

接下来，我会使用setInterval作为动画循环，因为你不能像现在这样停止它，它会使代码更清晰。

最后，对于你的掠夺者：你是否需要类似下面的内容，将代码附加到文档的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，所以我可以根据需要停止循环。

循环创建更多项目？

2 个答案: