Я пытаюсь разместить имена сотрудников над их портретом.
Я зацикливаюсь на объекте объектов, чтобы получить сотрудников по найму
var classes = {
2013: {
"image/path.png" : "name of employee",
"image/path2.png" : "name of employee2"
},
2012...
}
И я прокручиваю их через jQuery each
чтобы отображать их портреты и имена на год аренды:
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>");
});
});
});
Для того, чтобы получить их имена появляются над их соответствующими портретами, я следовал за этим это руководство и попытался заключени изображения в положении: относительный контейнер ($('#overlay').append("<span class='imagesContainer'>");... append image here... $('#overlay').append("</span>");
затем помещая текст поверх него, позиционируя: absolute... но он не работает...
CSS:
#overlay {
position: relative;
float: left;
width: 100%;
}
.imagesContainer {
position: relative;
float: left;
}
.names {
position: absolute;
/*background: rgba(0, 0, 0, 0.7);*/
padding: 5px;
color: white;
font-size: 12px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Любые мысли, как я могу получить каждое имя, чтобы появиться над правильным изображением?
Благодарю!
append()
не работает таким образом. Вы можете добавлять только полные элементы, а не только их части. Поэтому вам нужно создать .imagesContainer
, добавить к нему другие элементы, а затем добавить .imagesContainer
в #overlay
:
var $imgContainer = $("<span class='imagesContainer'>");
$imgContainer.append(img);
$imgContainer.append("<span class='names'>" + name + "</span>");
$('#overlay').append($imgContainer);
append()
не разрешал частичное добавление. Я использовал эту технику все время с PHP. Быстрый вопрос, почему вам нужно установить переменнуюimgContainer
переменную jQuery$imgContainer
? Какая разница? Позволяет ли сделать его объектом jQuery доступ к его свойствам, таким какappend()
?.imagesContainer
добавить.imagesContainer
к#overlay
, а затем добавить к нему два элемента, но это изменило бы DOM три раза. То, как я это сделал, модифицирует DOM только один раз.