Вытащить значение из тега alt - нужно его поменять по клику Jquery - PullRequest
0 голосов
/ 08 марта 2012

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

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

.

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

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

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

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

Ответы [ 2 ]

1 голос
/ 08 марта 2012

Большинство из них работает:

В этой строке есть проблема:

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

1 голос
/ 08 марта 2012

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

$("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'));
});
...