Вытащить значение из тега alt - нужно его поменять по клику Jquery

Question

Итак, я сделал небольшую галерею изображений - в основном, когда вы нажимаете на миниатюру, он извлекает заголовок из тега alt - помещает его в div для отображения под изображением в качестве заголовка и отображает изображение в полноэкранном режиме. Б.Г.

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

В настоящее время заголовок не отображается при загрузке страницы, когда вы щелкаете по нему - он показывает заголовок по желанию, но при нажатии на другое изображение не удаляет этот заголовок

Вот мой существующий код

    <ul id="horses">
                <li><a class="clicker" rel="drawings-bg"><img src="/assets/img/portfolio/horse.jpg" alt="horse" /></a></li>
                <li><a class="clicker" rel="contact-bg"><img src="/assets/img/portfolio/dogs.jpg" alt="dogs" /></a></li>
                <li><a class="clicker" rel="drawings-bg"><img src="/assets/img/portfolio/horse.jpg" alt="horse" /></a></li>
    </ul>

Jquery

     $(document).ready(function() {
    var imginfo = $('.imgtitle');
$("ul#horses li img").click(function() {
      if(imginfo)  $(imginfo).siblings('.imgtitle').remove();
$(this).parent().append("<div class=imgtitle>" + $(this).attr("alt") + "</div>");
     });
});

заранее спасибо

Answer 1

Большая часть этого, кажется, работает:

Эта строка имеет проблему:

if(imginfo)  $(imginfo).siblings('.imgtitle').remove();

Экземпляры jQuery всегда верны, поэтому эта строка всегда будет работать. Не обращая на это внимания, разве не должно быть так?

$(document).ready(function() {
  var imginfo = $('.imgtitle');
  $("ul#horses li img").click(function() {
    $('ul#horses li .imgtitle').remove();
    $(this).parent().append(
      "<div class=imgtitle>" + $(this).attr("alt") + "</div>"
    );
  });
});

... если вы пытаетесь удалить другие заголовки при отображении нового: http://jsbin.com/iqugih

Answer 2

Попробуй это:

$("ul#horses li img").click(function() {
    var i = $(this);
    var imageTitle = i.parent().find('.imgtitle');
    if(null === imageTitle || imageTitle.length == 0) {
        imageTitle = $('<div/>').addClass('imgtitle');
        i.parent().append(imageTitle);
    }

    imageTitle.html(i.attr('alt'));
});