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

});