jQuery: выбор элементов, созданных в цикле

Question

Вопрос новичка: у меня есть цикл, который размещает несколько элементов на странице, но когда я ссылаюсь на идентификаторы, я могу выбрать только первый. Может кто-нибудь сказать мне, как я могу применить функцию наведения на элементы?

Я пытаюсь создать страницу с точками, где каждая из них исчезает и исчезает при наведении курсора. В тот момент, когда я выбираю первую точку, он просто теряет самообладание, и никто из остальных не отвечает. Заранее спасибо!

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

Вы можете немного изменить свой jQuery, как это

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

});     

Answer 2

id атрибуты должны быть уникальными на каждой странице, но вы повторяете их, поэтому $('#dot') находит только первую. HTML4 имеет это сказать:

id = имя [CS]
Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

И HTML5 :

Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать хотя бы один символ.

Вместо этого вы должны использовать класс:

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