Javascript 使用jQuery在一组图像上定位文本

我想把员工的名字盖在他们的肖像上

我正在通过一个对象对象的循环来获取员工的雇佣年份

var classes = { 
2013: { 
"image/path.png" : "name of employee", 
"image/path2.png" : "name of employee2" 
}, 
2012... 
}

我用jQuery

对每个人进行循环，以显示他们的肖像和雇佣年份的姓名：

        jQuery(document).ready(function($){
            //identify all elements in <li>
            $('li').on('mouseover', function(e){
                $('#overlay').empty();
                var title = $('<h2>');
                title.text('Class of ' +  e.target.id);
                $('#overlay').append(title);

                $.each(classes[e.target.id], function(path, name) {
                    var img = $('<img/>');
                    img.attr('src', path);
                    $('#overlay').append("<span class='imagesContainer'>");
                    $('#overlay').append(img);
                    $('#overlay').append("<span class='names'>" + name + "</span>");
                    $('#overlay').append("</span>");
                }); 
            });
        });

有没有想过如何让每个名字出现在正确的图像上

谢谢
 
append（）
不能那样工作。您只能附加完整的元素，而不仅仅是其中的一部分。因此，您需要创建
.imagesContainer
，将其他元素附加到该元素，然后将
.imagesContainer
附加到
#overlay
：

var $imgContainer = $("<span class='imagesContainer'>");
$imgContainer.append(img);
$imgContainer.append("<span class='names'>" + name + "</span>");

$('#overlay').append($imgContainer);

var$imgContainer=$（“”）；
$imgContainer.append（img）；
$imgContainer.append（“+name+”）；
$（'#overlay'）.append（$imgContainer）；
append（）
不能那样工作。您只能附加完整的元素，而不仅仅是其中的一部分。因此，您需要创建
.imagesContainer
，将其他元素附加到该元素，然后将
.imagesContainer
附加到
#overlay
：

var $imgContainer = $("<span class='imagesContainer'>");
$imgContainer.append(img);
$imgContainer.append("<span class='names'>" + name + "</span>");

$('#overlay').append($imgContainer);

var$imgContainer=$（“”）；
$imgContainer.append（img）；
$imgContainer.append（“+name+”）；
$（'#overlay'）.append（$imgContainer）；
非常感谢！我知道我想去哪里，但不知道
append（）
不允许部分追加。我一直在PHP中使用这种技术。快速提问，为什么需要将
imgContainer
变量设置为jQuery变量
$imgContainer
？有什么区别？将其作为jQuery对象是否允许您访问其属性，例如
append（）
？将其附加到DOM是一项相对昂贵的任务。您可以先将
.imagesContainer
附加到
#overlay
中，然后再将这两个项目附加到它，但这会修改DOM三次。我这样做只会修改DOM一次。好吧，为了清楚起见。。。你能再解释一下你的只修改了一次吗？我想了解这一点，这样我就可以优化我未来的开发方式。。。谢谢当然第一行创建一个元素，但该元素已分离，文档尚未修改。直到最后一行，我才通过向文档添加元素来修改文档。这有意义吗？还有，“对于jQuery变量$imgContainer”。在变量名前面加上
$
只是一种惯例，可以很容易地看到变量包含jquery对象而不是本机DOM元素。我可以给它起任何名字。非常感谢！我知道我想去哪里，但不知道
append（）
不允许部分追加。我一直在PHP中使用这种技术。快速提问，为什么需要将
imgContainer
变量设置为jQuery变量
$imgContainer
？有什么区别？将其作为jQuery对象是否允许您访问其属性，例如
append（）
？将其附加到DOM是一项相对昂贵的任务。您可以先将
.imagesContainer
附加到
#overlay
中，然后再将这两个项目附加到它，但这会修改DOM三次。我这样做只会修改DOM一次。好吧，为了清楚起见。。。你能再解释一下你的只修改了一次吗？我想了解这一点，这样我就可以优化我未来的开发方式。。。谢谢当然第一行创建一个元素，但该元素已分离，文档尚未修改。直到最后一行，我才通过向文档添加元素来修改文档。这有意义吗？还有，“对于jQuery变量$imgContainer”。在变量名前面加上
$
只是一种惯例，可以很容易地看到变量包含jquery对象而不是本机DOM元素。我可以给它起任何名字。