jQuery：选择循环中创建的项目

Question

新手问题：我有一个循环，它在页面上放置了许多元素，但是当我引用这些ID时，我只能选择第一个元素。有人能告诉我如何将悬停功能应用到物品上吗？

我正试图实现一个点的页面，其中每个都在淡入淡出时淡入淡出。目前，当我选择第一个点时，它就会变得不合时宜，而其他的都没有响应。提前致谢！

var dots = ''; 

for (i = 0; i < 100; i++) { 
    dots += '<div id="dot" class="blue">&nbsp;</div><div id="dot" class="red">&nbsp;</div><div id="dot" class="grey">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('#dot').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

});  

Answer 1

id属性必须在每一页中是唯一的，但你重复他们，这就是为什么$('#dot')只找到的第一个。 HTML4有这样说：

ID = 名称 [CS]
该属性分配一个名称的元素。该名称在文档中必须是唯一的。

而且HTML5：

值必须是在元素的家子树的所有ID之间独特的，并且必须包含至少一个字符。

您应该使用一个类来代替：

var dots = ''; 
for (i = 0; i < 100; i++) { 
    dots += '<div class="dot blue">&nbsp;</div><div class="dot red">&nbsp;</div><div class="dot grey">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('.dot').hover(
    function() { $(this).stop().fadeOut(200) }, 
    function() { $(this).stop().fadeIn(400) } 
); 

Answer 2

你可以改变你的jQuery有点像这样

// dot hover 
$('div').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

OR

var dots = ''; 

for (i = 0; i < 100; i++) { 
    dots += '<div id="dot" class="blue dot">&nbsp;</div><div id="dot" class="red dot">&nbsp;</div><div id="dot" class="grey dot">&nbsp;</div>'; 
} 
//insert all 
$('body').append(dots);         

// dot hover 
$('.dot').hover(function() { 
    $(this).stop().fadeOut(200); 
     }, function() { 
    $(this).stop().fadeIn(400); 
}); 

});