Размещение текста над набором изображений с использованием jQuery

0

Я пытаюсь разместить имена сотрудников над их портретом.

Я зацикливаюсь на объекте объектов, чтобы получить сотрудников по найму

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

Любые мысли, как я могу получить каждое имя, чтобы появиться над правильным изображением?

Благодарю!

Теги:

1 ответ

3
Лучший ответ

append() не работает таким образом. Вы можете добавлять только полные элементы, а не только их части. Поэтому вам нужно создать .imagesContainer, добавить к нему другие элементы, а затем добавить .imagesContainer в #overlay:

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

$('#overlay').append($imgContainer);
  • 0
    Спасибо! Я знал, куда я хотел пойти, но не знал, что append() не разрешал частичное добавление. Я использовал эту технику все время с PHP. Быстрый вопрос, почему вам нужно установить переменную imgContainer переменную jQuery $imgContainer ? Какая разница? Позволяет ли сделать его объектом jQuery доступ к его свойствам, таким как append() ?
  • 0
    Присоединение к DOM является относительно дорогой задачей. Вы можете .imagesContainer добавить .imagesContainer к #overlay , а затем добавить к нему два элемента, но это изменило бы DOM три раза. То, как я это сделал, модифицирует DOM только один раз.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню