Question

我正在试验jQuery＆amp;的JavaScript。我试图用鱼等创造一个互动的海洋。

我随机地将鱼div放在页面上的随机位置，使用以下代码：

$newfish = $("<div id='fishToLeft'></div>").css({
    'left': randomX + 'px',
    'top': randomY + 'px',
}) 

$newfish.appendTo('#sea');

鱼的图像在CSS中配置。

现在我想为这些div设置动画（它附加大约20条鱼），但我无法弄清楚如何选择附加的鱼类div（fishToLeft＆amp; fishToRight）。

任何人都可以帮助我吗？

已解决！我使用相同的类，而不是对所有鱼使用相同的ID，现在它可以工作。

感谢所有快速回答。

Answer 1

使用不是id的类，因为id应该是唯一的。

$newfish = $("<div class='fish'></div>").css({

按班级选择：

$('.fish');

或者，如果只有鱼作为孩子存在，那么只需选择孩子：

$('#sea').children();

通过将鱼类参考存储在数组中，可以避免重新选择它们：

var fish = [];
// in your loop
fish.push($newfish);

对每条鱼做点什么：

$.each(fish, function(){

});

Answer 2

此代码的问题在于您有多个具有相同ID的元素是错误的。我会改用class或自定义属性。例如，使用class选择器：

$newfish = $("<div class='fishToLeft'></div>").css({
    'left': randomX + 'px',
    'top': randomY + 'px',
}) 

$newfish.appendTo('#sea'); 

var $fishesToLeft = $(".fishToLeft"); // array of elements/fishes to left

Answer 3

试试这个：

$newfish = $("<div class='fish'></div>").css({
     'left': randomX + 'px',
     'top': randomY + 'px',
})

让我们说你想点击活动，然后：

$(".fish").on("click", function(){
    var myFish = $(this);
})

myFish将包含点击的元素

Answer 4

id用于页面上的单个唯一元素。

因此，fishToLeft和fishToRight不是ids，而是classes。

所以，你需要使用：

<div class="fishToLeft"></div>
<div class="fishToRight"></div>

稍后，当您想要选择所有鱼时，您可以使用：

var fishesToLeft = document.getElementsByClassName('fishToLeft'); 
var fishesToRight = document.getElementsByClassName('fishToRight');

如何选择附加元素？

4 个答案: