Jquery 获取图像标题并输入工具提示

我正在尝试制作一个照片库，其中有一张大图，在大图下面有一行较小的图片。单击行中的一个较小的图像时，它在

#container

中显示为较大的图像。我试图制作一个带有图片标题的工具提示，但效果不太好。我一直在工具提示中看到第一个图像的标题（“bloemtje op z'n neus”），也就是当我单击其他图像之一并将鼠标悬停在其上时。这是一件简单的事，但我做不出来。使用

$（'#strip img'）.attr（'title'）

进行了尝试。以下是全部代码：

$（文档）.ready（函数（e）{
$（'#strip'）。在（'click'，'img'，function（）上{
var bron=$（this.attr（'src'）；
$（“#容器img”）.fadeOut（'fast'，function（）{
$（this.attr（'src'，bron）.fadeIn（'fast'））
});
});
$（'#container img'）。on（'mouseenter'，函数（e）{
var div=$（'#strip img'）.attr（'title'）//如何在工具提示中显示每个图像的标题？
变量位置={
"top":(e.pageY-10)+px,，
“左”：（e.pageX+15）+“px”
}
$('')
.text（div）
.appendTo（'正文'）
.css（职位）
.fadeIn（）；
});
$（'#container img'）。on（'mouseleave'，函数（e）{
$（'.tooltip'）.remove（）
});
});
#容器{
高度：435px；
}
#集装箱img{
宽度：400px；
显示：块；
边框：2倍实心#000000；
}
#剥落{
背景色：#ccc；
边缘顶部：10px；
填充物：5px；
}
#带状img{
宽度：100px；
利润率：0.5px；
边框：1px实心#000000；
}
.工具提示{
显示：无；
位置：绝对位置；
边框：2倍实心#000；
边界半径：5px；
填充物：2px4px；
背景色：#FFF；
颜色：#000；
}



无论何时调用
函数（）
，此
表示的值都会更改

因此，缓存事件数据本身可能是有用的
函数（e）
，或者通过调用
var self=this创建对原始
this
的额外引用可能更有意义两个选项如下所示：

//cache the event object 
$('#strip').on('click', 'img', function (e){

    var $target = $(e.currentTarget);
    var bron = $target.attr('src'));
      $('#container img').fadeOut('fast', function (){
        // this is no longer the (this) that was in the enclosing function
        $target.attr('src', bron).fadeIn('fast')  // maintain the context
      });
 });

或者像这样锁定上下文可能更有意义：

// cache reference to the original 'this'
$('#strip').on('click', 'img', function (){
    var self = this; // remember who this is always.
    var bron = $(self).attr('src');
    $('#container img').fadeOut('fast', function (){
    // this is no longer the (this) that was in the enclosing function
        $(self).attr('src', bron).fadeIn('fast') 
     });
});

同时关闭图像标记：

<div id="container">**<img src="Images/1.jpg">**</div><br>

**


您还应该注意，
$（“#container img”）
将选择#container内的每个img标记。您可能希望通过给它一个唯一的id来精确地指定哪个图像。
有几种不同的方法来实现您想要的。其中之一是使用条带中图像的id属性

我已使用以下命令更改了您的代码：

让activeId=1-设置一个变量，该变量将指向容器中当前显示的strip元素
var div=$（
#${activeId}
）.attr（'title'）-在鼠标指针上显示标题时，使用条带中图像的id作为选择器
activeId=$（this）.attr（'id'）-在更改容器中的图像时更新
activeId

$（文档）.ready（函数（e）{
设activeId=1；
$（'#strip'）。在（'click'，'img'，function（）上{
var bron=$（this.attr（'src'）；
activeId=$（this.attr（'id'）；
$（“#容器img”）.fadeOut（'fast'，function（）{
$（this.attr（'src'，bron）.fadeIn（'fast'））
});
});
$（'#container img'）。on（'mouseenter'，函数（e）{
var div=$（`#${activeId}`）.attr（'title'）//如何在工具提示中显示每个图像的标题？
变量位置={
"top":(e.pageY-10)+px,，
“左”：（e.pageX+15）+“px”
}
$('')
.text（div）
.appendTo（'正文'）
.css（职位）
.fadeIn（）；
});
$（'#container img'）。on（'mouseleave'，函数（e）{
$（'.tooltip'）.remove（）
});
});
#容器{
高度：435px；
}
#集装箱img{
宽度：400px；
显示：块；
边框：2倍实心#000000；
}
#剥落{
背景色：#ccc；
边缘顶部：10px；
填充物：5px；
}
#带状img{
宽度：100px；
利润率：0.5px；
边框：1px实心#000000；
}
.工具提示{
显示：无；
位置：绝对位置；
边框：2倍实心#000；
边界半径：5px；
填充物：2px4px；
背景色：#FFF；
颜色：#000；
}



您在代码中遗漏了两件事

您还必须复制
title
属性，否则将无法获得所选图像的标题

  $('#strip').on('click', 'img', function() {
    var bron = $(this).attr('src');
    var title = $(this).attr('title'); // you have to copy title from newly selected image
    $('#container img').fadeOut('fast', function() {
    $(this).attr('title', title); // adding new title
    $(this).attr('src', bron).fadeIn('fast');
  });

使用
此
，因为此关键字将引用容器的当前图像

$('#container img').on('mouseenter', function(e) {
  var div = $(this).attr('title') //use this because it will point to current image present in container
  var position = {
  'top': (e.pageY - 10) + 'px',
  'left': (e.pageX + 15) + 'px'
}

$('<div class="tooltip"></div>')
  .text(div)
  .appendTo('body')
  .css(position)
  .fadeIn();
});

$（'#容器img'）。在（'mouseenter'，函数（e）上{
var div=$（this）.attr（'title'）//使用它，因为它将指向容器中的当前图像
变量位置={
"top":(e.pageY-10)+px,，
“左”：（e.pageX+15）+“px”
}
$('')
.text（div）
.appendTo（'正文'）
.css（职位）
.fadeIn（）；
});

您可以检查此
中的工作代码以获取工具提示，我建议您在document.ready上创建一次工具提示div，然后只更新文本和位置。它的性能比每次删除并重新添加到DOM要好。谢谢您的评论。尝试了您的代码，但无效，图像甚至没有显示在#容器中：（请参阅：致Goran的消息：首先，感谢您的贡献。现在，编辑帖子时：从外部网站（如pastebin）嵌入代码，并将其转换为片段非常好！但是，不要删除海报的链接。OP允许包含外部链接。一些用户喜欢使用在线版本，可以将代码保存到eir拥有自己的个人资料，他们也可以以他们无法做到的方式编辑和实验代码。嵌入时，请确保您也保留他们的链接。谢谢！！（我将在阅读/确认此评论后删除此评论，因为它与此帖子无关）理解并完全同意。