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

});

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

2 个答案: