показать alt тег для изображения, используя это - jquery - PullRequest
Новая
       26

показать alt тег для изображения, используя это - jquery

2 голосов
/ 27 апреля 2011

Клиент хочет, чтобы текст alt tag появлялся при наведении (и, увы, не может быть уверен, что это должен быть заголовок). Это насколько я понял, но мне нужен только alt-тег hovered img для отображения, а не все из них. Я пытался удалить «каждый», но он сломался (я знаю, что я не очень хорош в этом). Как мне это исправить: 

$("ul.thumb li img").hover(function() {
  $(this).each(function(i, ele) {
  $("li").append("<div class=alt>"+$(ele).attr("alt")+"</div>");
      $(this).mouseleave(function(event){
      $(".alt").css('display','none');
});
});
});

Вот оно в скрипке

Ответы [ 5 ]

3 голосов
/ 27 апреля 2011 
$("ul.thumb li img").each(function() {
    $(this).parent('li').append($("<span/>").text($(this).attr("alt")).hide());
}).hover(function(){
  $(this).parent('li').children('span').show();
},function(){
  $(this).parent('li').children('span').hide();
});

DEMO

2 голосов
/ 27 апреля 2011

Вы можете сделать это в два этапа: 

// create the divs
$("ul.thumb li img").each(function() {
    $('<div />', {
        class: 'alt', 
        text: $(this).attr("alt")
    }).appendTo($(this).parent());
});

// toggle the divs visibility
$("ul.thumb li img").hover(function() {
    $(this).parent().children('.alt').toggle();
});
// OR attach the handler to the li element instead:
$("ul.thumb li").hover(function() {
    $(this).children('.alt').toggle();
});

DEMO

1 голос
/ 27 апреля 2011

Решение TheSuperTramp - лучший подход, но я немного подправил его, чтобы улучшить производительность. 

$('img', 'ul').each(function() {
    $(this).parent().append('<div style="display:none">' + this.alt + '</div>'); 
}).bind({
    mouseenter: function() {
       $(this).siblings('div').show();
    },
    mouseleave: function() {
        $(this).siblings('div').hide();
    } 
});

Демо: http://jsfiddle.net/5dxhC/1/

1 голос
/ 27 апреля 2011

Вам не нужен .each(), и вы можете обработать mouseleave в качестве второго параметра для .hover(): 

$("ul.thumb li img").hover(function() {
    console.log(this);
    $(this).parent().append("<div class=alt>" + $(this).attr("alt") + "</div>");
}, function() {
    $(this).siblings('.alt').remove();
});

Рабочая демонстрация на http://jsfiddle.net/alnitak/dPVCN/

Примечание: я полностью удаляю div .alt при наведении мыши, поскольку в противном случае он будет снова и снова добавлять текст alt.

Лучшим решением может быть предварительное создание всех alt div, а затем просто .show() или .hide() их в зависимости от ситуации.

0 голосов
/ 27 апреля 2011

Есть две проблемы:

  1. Вы добавляете div ко всем li элементам вместо только текущего (см. Ответ @ cdeszaq)
  2. скрытие недавно добавленных div на mouseleave, скрытие всех будущих элементов .alt.Вы должны использовать .remove() вместо свойства css в mouseout
...