jQuery : 루프에서 생성 된 항목 선택

Question

새내기 질문 : 페이지에 여러 요소를 배치하는 루프가 있지만 ID를 참조 할 때 첫 번째 요소 만 선택할 수 있습니다. 누군가가 항목에 호버 기능을 적용 할 수있는 방법을 말해 줄 수 있습니까?

나는 점을 찍을 때 각 점이 페이드 인하 고 튀어 나오는 점의 페이지를 얻으려고합니다. 지금은 첫 번째 점을 선택했을 때 엉망이됩니다. 다른 점은 아무 것도 응답하지 않습니다. 미리 감사드립니다! $('#dot')는 첫 번째를 발견 왜

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이 반드시 각 페이지 내에서 고유 속성 그러나 당신이 그 (것)들을 반복하고, 그입니다. 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

당신은 조금이

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

또는

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

});